Pengenalan Pengaturcaraan Web Menggunakan PHP dan USBWebServer

-----

Internet and Worldwide Web

Internet adalah gabungan rangkaian komputer serata dunia. Gabungan ini melibatkan penggunaan berbagai jenis perkakasan dan perisian komputer yang dimiliki oleh syarikat telekomunikasi, organisasi awam dan orang persendirian. Melalui gabungan rangkaian ini, pelbagai perkhidmatan berasaskan pertukaran data dapat diwujudkan termasuklah Worldwide Web (Web).

Antara teknologi utama yang digunakan di dalam Internet ialah TCP/IP. TCP bermaksud Transfer Control Protocol. Ia merangkumi aspek pemindahan data dari satu peranti komunikasi (communication device) ke peranti yang lain. IP bermaksud Internet Protocol. Ia merangkumi aspek penentuan lokasi setiap komputer yang berada di dalam rangkaian Internet (atau mana2 rangkaian setempat yang menggunakan teknologi TCP/IP). Melalui teknologi TCP/IP, maklumat elektronik dapat dihantar dari satu komputer ke komputer yang lain dengan cekap meskipun jarak perhubungan ini sangat jauh.

Lihat klip video ini untuk memahami bagaimana teknologi TCP/IP berfungsi (http://www.youtube.com/watch?v=Ve7_4ot-Dzs)

Worldwide Web (Web)

Worldwide Web atau WEB adalah sejenis perkhidmatan perkongsian dokumen dan aplikasi elektronik melalui rangkaian Internet. Pertukaran data elektronik dilakukan dengan berdasarkan teknologi HTTP (Hyper Text Transfer Protocol). Apabila dua komputer berhubung melalui kaedah HTTP, kedua-duanya akan melalui kitaran yang dipanggil HTTP Request/Response

HTTP Request/Response Basics

HTTP Request/Response adalah sebahagian dari kitaran perhubungan di antara dua mesin yang berinteraksi menggunakan teknologi HTTP melalui rangkaian Internet. Maklumat lanjut tentangnya boleh dibaca di http://devhub.fm/http-requestresponse-basics/.

Ringkasnya:

1. Perhubungan bermula apabila pengguna melawat sesebuah tapak web melalui URL tapak tersebut, e.g google.com

2. Komputer pengguna akan menghantar HTTP Request untuk mendapatkan laman web di komputer google.com.

3. Komputer google.com menerima HTTP Request, lalu memprosesnya dan mengembalikan data yang diperlukan melalui HTTP Response.

Client-Server Architecture

Client-Server Architecture adalah satu senibina perhubungan komputer di mana peranan dua komputer yang sedang berinteraksi melalui rangkaian komputer (seperti Internet) ditakrif sebagai Client (komputer yang memohon data, iaitu HTTP Request) dan Server (komputer yang melayan permohonan data, iaitu HTTP Response).

Sesebuah komputer Client perlu mempunyai perisian Web Client seperti perisian Web Browser untuk membolehkannya menghantar isyarat HTTP Request dan memaparkan isyarat HTTP Response yang diterima dari Server.

Sesebuah komputer Server pula perlu mempunyai perisian Web Server seperti Apache, Microsoft IIS atau Apple OS X untuk membolehkannya menerima isyarat HTTP Request, memproses permohonan dan memulangkan isyarat HTTP Response ke komputer Client.

History of Web Browsers

Terdapat berbagai perisian Web Browser yang digunakan pada hari ini. Sejarah perisian ini bermula pada tahun 1990 pada Tim Berners Lee memperkenalkan teknologi Web. Lihat infografik berikut untuk mengikuti perjalanan sejarah Web Browser.

Lihat pautan berikut http://sixrevisions.com/web-development/the-history-of-web-browsers/

History of Web Server Software

Web Server pertama di dunia terletak di URL http://info.cern.ch/. Jika anda melawatnya, anda berpeluang membaca kisah tentangnya termasuklah komputer pertama (komputer NEXT) yang menjadi hos perkhidmatan ini.

Perisian Web Server yang pertama dikenali sebagai CERN HTTPD (http://en.wikipedia.org/wiki/CERN_httpd), kemudiannya diikuti oleh NCSA HTTPD (http://en.wikipedia.org/wiki/NCSA_HTTPd). Pembangunan perisian NCSA HTTPD diteruskan oleh projek Apache (http://en.wikipedia.org/wiki/Apache_HTTP_Server). Projek Apache terus berkembang sehingga sekarang. Pada tahun 2009, ia telah mencatat rekod melepasi jumlah penggunaan oleh 100 juta tapak web.

Antara perisian Web Server terawal selain Apache adalah Netscape Enterprise Server 1994 (http://en.wikipedia.org/wiki/Netscape_Enterprise_Server) yang kini dikenali sebagai Oracle iPlanet Web Server (http://en.wikipedia.org/wiki/Oracle_iPlanet_Web_Server). Syarikat perisian gergasi Microsoft turut mempunyai perisian Web Server sendiri yang dipanngil Internet Information Service, IIS yang mula diedar melalui perisian Sistem Operasi NT seawal tahun 1995 (http://en.wikipedia.org/wiki/Internet_Information_Services).(Lihat juga imbasan sejarah syarikat Microsoft terhadap pembabitan mereka di dalam Web, http://www.microsoft.com/misc/features/features_flshbk.htm)

Pada hari ini terdapat berbagai produk perisian Web Server (lihat http://en.wikipedia.org/wiki/Comparison_of_web_server_software).

Apache masih kekal popular dan terdapat berbagai jenis produk variant yang dihasilkan daripadanya. Tutorial dalam dokumen ini juga akan menggunakan perisian Apache yang diedarkan olehhttp://www.usbwebserver.net/en/

Web Application Development

Pembangunan Aplikasi Web merujuk kepada aktiviti membangunkan perisian yang dicapai melalui persekitaran Web. Oleh kerana bahasa asal Web iaitu HTML adalah terhad kepada paparan maklumat, bahasa pengaturcaraan khas diperlukan untuk menjalankan aktiviti pemprosesan maklumat yang akan dijalankan oleh Server Machine. Antara bahasa pengaturcaraan popular pada hari ini termasuklah PHP (PHP Hypertext Processor), ASP (Active Server Page) dan JSP (Java Server Page). Ketiga-tiga bahasa ini mempunyai sejarah dan komuniti yang tersendiri.

PHP pernah merekodkan catatan sebagai bahasa pengaturcaraan yang digunakan oleh sejumlah 20 juta Internet Domain pada bulan April 2007. PHP juga turut dicatatkan sebagai penyumbang kepada 30% Web Vulnerabilities. Antara punca yang dikenalpasti adalah kelalaian pengaturcara di samping ralat teknikal pada bahasa tersebut.

Memandangkan Bahasa PHP adalah antara yang popular dan isu pertahanannya juga kritikal, tutorial dalam dokumen ini memberikan tumpuan kepada aspek pertahanan Web melalui perspektif pengaturcaraan PHP.

Categories of Web Vulnerabilities

1) Kegagalan Proses Penentusahan (Authentication), 62% - Kegagalan pada mekanisma login yang membolehkan penyerang mengesan katakunci yang lemah, melancarkan serangan bertubi-tubi (brute force) atau melangkaui sekatan login.

2) Kegagalan Kawalan Capaian (Access Control), 71 % - Kegagalan mengawal capaian sumber mengakibatkan penceroboh dapat memperolehi maklumat atau memperolehi status Pengguna Pentadbir (Admin User).

3) Injeksi SQL (SQL Injection), 32% - Penyerang berjaya mengubahsuai kod input sehingga mengakibatkan sistem hujung-belakang (back-end) memproses input yang memberi kelebihan kepadanya samada untuk memperolehi atau membuat pemprosesan data.

4) Serangan Skrip Silang-Tapak (Cross-Site Scripting), 94% - Penyerang mensasarkan pengguna lain, mencapai data mereka, bertindak di bawah identiti mereka atau menyerang mereka.

5) Kebocoran Maklumat, 78% - Aplikasi membocorkan maklumat akibat kegagalan sistem menangani ralat atau apa-apa insiden lain.

6) Pemalsuan Silang-Tapak (Cross-Site forgery), 92% - Penyerang memperdaya pengguna menggunakan skrip di tapaknya untuk berinteraksi dan mencapai akses aplikasi mangsa.

Web and Database Server

Kebanyakan Aplikasi Web menyimpan, memproses dan menghantar data dalam kuantiti yang sangat besar. Oleh itu perisian Database Server merupakan sokongan utama terhadap Web Server sedia ada. Antara perisian Database Server yang popular termasuklah MySQL, MSSQL Oracle dan Access (http://www.w3schools.com/hosting/host_databases.asp).

Apache-MySQL-PHP (AMP) Package

Apache, MySQL dan PHP pada mulanya adalah produk berasingan bagi memenuhi objektif tersendiri di dalam persekitaran Web; Apache digunakan untuk memproses HTTP, MySQL digunakan untuk menyimpan data manakala PHP digunakan untuk memproses data dalam aplikasi Web. Walaubagaimanapun, memandangkan ketiga-tiganya diedarkan sebagai Perisian Sumber Terbuka, komuniti pengaturcara telah menggabungkannya ke dalam satu pakej untuk memudahkan aktiviti pembangunan perisian dimulakan. Pakej ini dikenali sebagai AMP (http://en.wikipedia.org/wiki/List_of_Apache%E2%80%93MySQL%E2%80%93PHP_packages). Jika ia dijalankan di dalam WIndows, ia dipanggil WAMP. Jika ia dijalankan di dalam Linux, ia dipanggil LAMP. Walaupun sistem operasi berbeza, pakej AMP tetap akan menghasilkan output, iaitu hasil pemprosesan maklumat yang sama. Pengguna juga akan melihat paparan yang sama meskipun menggunakan perisian Web Browser yang berbeza.

Pakej AMP yang digunakan dalam tutorial ini diambil dari http://www.usbwebserver.net/en/.

Sekiranya anda mahu mencuba pakej LAMP (Linux-Apache-MySQL-PHP), pakej terkini yang paling mudah ialah SLAMPP (http://slampp.abangadek.com/info/ tarikh akses: 6 Okt 2012). Pautan yang diberikan menyediakan anda sumber Live CD Linux Slackware yang telah siap dipasang dengan perisian XAMPP (http://www.apachefriends.org). Live CD tersebut turut menyediakan fungsi pemasangan terus ke Hard Disk di mana anda boleh pilih sama ada mahu memasang ke Hard Disk Fizikal atau melalui Sistem Maya seperti VirtualBox atau VMWare.

USBWebServer Package

Pakej USBWebserver adalah satu rangkuman perisian Apache-MySQL-PHP yang dihasilkan oleh sebuah syarikat Jerman untuk dijalankan di dalam persekitaran Windows. Ianya berkonsepkan portable, iaitu boleh dipindah dan dijalankan tanpa perlu pemasangan ke dalam sistem Windows. Keanjalan ini sangat berguna kerana pengaturcara boleh memindahkan kandungan program dan data ke mana-mana peranti tanpa perlu mengganggu tetapan Windows.

Di samping itu, USBWebserver menyediakan paparan Control Panel (seperti di atas) yang memudahkan pengguna membuat tetapan yang berkaitan. Paparan ini sangat mudah digunakan dan ia amat praktikal untuk persekitaran pembangunan (Development Environment). USBWebserver tidak disyorkan untuk persekitaran pengeluaran (Production Environment).

Running PHP-powered Apache Web Server for first time

1. Download perisian USBWebserver dari laman web http://www.usbwebserver.net/en/. Ketika dokumen ini ditulis, ia berada pada versi 8.5. Versi 8.5 menyokong PHP5, Apache 2, MySQL5 dan Sqlite 3. Ia cukup untuk menyokong keperluan semua tutorial dalam dokumen ini.

2. Sebaiknya letakkan Directory Pangkal (Root Directory) pada C:\ seperti ilustrasi di bawah:

C........        [USBW]........        [apache2]

                        [lang]

                                        [mysql]

                        [php]

                                        [phpmyadmin]

                        [root]

                                        [settings]

                        usbwebserver.exe 

3. Double-Click ikon usbwebserver.exe. (imej ikon tertera seperti di atas).

4. Tetingkap Control Panel akan muncul seperti di bawah.

5. Lihat butang tertulis “Localhost”. Klik butang tersebut. Tetingkap Web Browser akan mempamerkan laman seperti di bawah.

6. Lihat pautan “Click here to go to the PHPINFO file”. Laman PHPINFO akan dipamerkan seperti di bawah. Secara ringkasnya, laman ini adalah isyarat bahawa PHP dalam keadaan tersedia. Anda mungkin perlu merujuk laman ini ketika mengikuti tutorial selanjutnya.

7. Kembali semula ke USBW Control Panel. Lihat butang tertulis “Root dir”. Klik butang tersebut. Windows File Explorer akan memaparkan kandungan direktori pangkal web (Web Root Directory).

C........        [USBW]........        [apache2]

                        [lang]

                                        [mysql]

                        [php]

                                        [phpmyadmin]

                        [root]

                                        [settings]

                        usbwebserver.exe

8. Sehingga ke tahap ini, anda perlu ingat dua perkara berikut:

8.1. URL untuk website adalah http://localhost:8080

8.2. LOCAL PATH untuk website adalah C:\USBW\ROOT\

9. Cipta direktori baru di bawah ROOT, namakannya “mypage”, perhatikan laluan berikut:

9.1. URL untuk website adalah http://localhost:8080/mypage

9.2. LOCAL PATH untuk website adalah C:\USBW\ROOT\mypage

10. Dengan menggunakan program Notepad++(http://portableapps.com/apps/development/notepadpp_portable) atau Notepad biasa, cipta File helloworld.php, Save di dalam direktori mypage. Taip kod berikut ke dalam helloworld.php

<?php

echo "Hello World";

?>

Yii Quick Start 3 (Adding Theme) (UsbWebserver)

Yii Quick Start 3 (Adding Theme)

• Introduction
• Steps
• Conclusion

Introduction

This tutorial explains the role of the layout and theme in Yii website.

This tutorial continues from http://php-steps.blogspot.com/2013/11/yii-quick-start-2.html 

Steps

1) Using File explorer, browse {webroot}/protected/views/layouts/…

By default, there are three layout files; main.php, column1.php and column2.php

Layout files specify the arrangement of HTML elements of a Yii web page.

2) The display of HTML elements is further defined by the theme.

Using File Explorer, browse {webroot}/themes/…

The default theme is classic. It doesn’t contain anything actually.

3) We can add new themes by simply adding a theme folder into the themes folder and edit the configuration file.

3.1) For example, download a theme called “mattskitchen”, http://yii.themefactory.net/theme/download/?id=113 or from here, https://drive.google.com/file/d/0B86b-ALn-1MGR0RuYV9OYWlTeVE/edit?usp=sharing 

3.2) Extract the folder “mattskitchen” into the themes folder.

Make sure the folder structures follow the example below.

3.3) Edit the configuration file {webroot}/protected/config/main.php

Add the line ‘theme’=>’mattskitchen’,

4) Refresh your browser.

You should be getting a new look.

However, the HOME link doesn’t work.

5) This is because the index controller specified in the hyperlink could not be found.

If you open the file {webroot}/protected/controllers/SiteController.php, you won’t find the name actionIndex.

Instead actionIndex is defined in {webroot}/protected/controllers/PostController.php.

6) Edit the file {webroot}/themes/mattskitchen/views/layouts/main.php

Replace the word “site” with “post” (as shown in the example below).

7) Refresh your browser.

The index page problem is solved but the sidebar doesn’t show up.

It could be that the column2.php in mattskitchen is missing or not according to the initial column2.php

8) As a solution, copy the file {webroot}/protected/views/layouts/column2.php to the {webroot}/themes/mattskitchen/views/layouts/…

9) Refresh your browser. You may get the desired outcome now.

10) There are a lot of free themes available at http://yii.themefactory.net/theme that you can try out.

Conclusion

This tutorial explains the role of the Layout and Theme to define the arrangement and look of a Yii web page. You need to know the location of action methods and pages in order to call them properly. In addition to that, your knowledge in HTML and CSS elements would be beneficial to help you troubleshooting page layout or display problem.

Yii Quick Start 2 (BootStrap, OOP, MVC and REST) (UsbWebserver)

Yii Quick Start 2

• Introduction
• Steps
• Conclusion

Introduction

This tutorial explains the role of the index.php of a Yii website as a bootstrap. Bootstrap means to load a small program that eventually calls the desired program into the computer, similar to an operating system being called by a BIOS program.

This tutorial continues from http://php-steps.blogspot.com/2013/11/yii-quick-start-1.html

Steps

1) Using File Explorer browse the Yii Blog Demo root file.

2) The name index.php is a common name found in PHP websites.

The content of the file is as follows:

Line no. 4 tells the server the location of Yii Framework folder.

Line no. 5 tells the server the location of the configuration details for this website.

Line no. 6 tells the server to include the yii.php when processing the index.php

Line no. 11 tells the server to create a static Web Application object based on the given configuration (in Line no. 5). This is an Object Oriented style of programming.

3) By default, Yii Web Application Object passes the control to {webroot}/protected/controllers/SiteController.php

How does it happen? Look at the following tracing table.

File Name	Line No.Code	Extract
Index.php	13	Yii::createWebApplication($config)->run();
Yii.php	25	class Yii extends YiiBase
YiiBase.php	98	return self::createApplication('CWebApplication',$config);
CWebApplication.php	63	public $defaultController='site';

The word ‘site’ refers to {webroot}/protected/controllers/SiteController.php

4) Open {webroot}/protected/controllers/SiteController.php

The instruction “$this->render('index');” will render the view file ‘protected/views/site/index.php’ using the default layout ‘protected/views/layouts/main.php’

View File = File that feeds the content to $content element.

Layout File = File that contains the elements HTML Header, Main Menu, BreadCrumb, $content and Footer.

<?php class SiteController extends Controller {         /**          * Declares class-based actions.          */         public function actions()         {                 return array(                         // captcha action renders the CAPTCHA image displayed on the contact page                         'captcha'=>array(                                 'class'=>'CCaptchaAction',                                 'backColor'=>0xFFFFFF,                         ),                         // page action renders "static" pages stored under 'protected/views/site/pages'                         // They can be accessed via: index.php?r=site/page&view=FileName                         'page'=>array(                                 'class'=>'CViewAction',                         ),                 );         }         /**          * This is the default 'index' action that is invoked          * when an action is not explicitly requested by users.          */         public function actionIndex()         {                 // renders the view file 'protected/views/site/index.php'                 // using the default layout 'protected/views/layouts/main.php'                 $this->render('index');         }         /**          * This is the action to handle external exceptions.          */         public function actionError()         {         ...         }         /**          * Displays the contact page          */         public function actionContact()         {          ...         }         /**          * Displays the login page          */         public function actionLogin()         {         ...         }         /**          * Logs out the current user and redirect to homepage.          */         public function actionLogout()         {         ...         } }

5) Refers to the file SiteController.php above

Notice that it has action methods:

• actionIndex
• actionError
• actionContact
• actionLogin
• actionLogout

6) You can call these action methods through URL call, e.g when you type http://localhost:8080/yii/demos/blog/index.php/site/contact, the method actionContact will be invoked. The method actionContact will create a form object, $model and passes the object to SiteController for render. This is also known as RESTful style (read more here, http://rest.elkstein.org/)

Conclusion

This tutorial shows how Yii uses Object Oriented Programming to implement the Model-View-Control framework.