Introduction to Web Platform Development PDF

Introduction to Web Platform Development PRESENTED BY: CHAN HUAH YONG PREPARED BY: TAN TIEN PING Outline Client server architecture Web server architecture Setting up LAMP HTML5 CSS3 PHP Web developer’s constraints Web programming vs general programming Software as a service  Client Server Arc...

Introduction to Web Platform Development PRESENTED BY: CHAN HUAH YONG PREPARED BY: TAN TIEN PING Outline Client server architecture Web server architecture Setting up LAMP HTML5 CSS3 PHP Web developer’s constraints Web programming vs general programming Software as a service  Client Server Architecture Client Server Architecture is a computing model in which the server hosts, delivers and manages most of the resources and services to be consumed by the client. The Web has a client-server architecture. Ref: https://cio-wiki.org/wiki/Client_Server_Architecture#:~:text=Client%20Server%20Architecture%20is%20a,a%20network%20or%20internet%20connection. Static HTML A website where the content is always the same. e.g. https://www.interspeech2021.org/ Dynamic HTML A website where the content is generated at real time. e.g. https://www.amazon.com Client-Side Programming HTML (HyperText Markup Language) defines the contents (text, images, sounds, …) of a webpage in such a way that a browser will display them. CSS (Cascading Style Sheets) styles the HTML webpage. Javascript provides dynamic client-side scripting. Server-Side Programming Server-side programming languages: PHP, Python, Java,.NET… Server-side framework (Optional) ◦ A collection of packages or modules that allows developers to write and publish their Web applications or services faster. ◦ As a developer using a framework, you typically write code which conforms to some kind of conventions that lets you "plug in" to the framework, delegating responsibility for the communications, infrastructure and low-level stuff to the framework while concentrating on the logic of the application in your own code. Note: In this class, we will not be using any web server framework. Server-side Webserver A webserver handles the clients’ http requests. Examples of webserver: Apache, nginx, Kestrel … Database A database is used to store data. Example of databases: Mysql, Excel, Oracle, … LAMP Stack LAMP stands for “Linux, Apache, MySql, PHP” is a software stack for developing dynamic web pages in Linux. There are other software stack such as WAMP, but here we will be learning LAMP. (Note: we will not be using Mysql). What is LAMP? ◦ Linux: webserver operating system. ◦ Apache: webserver handling html request/respond. ◦ Mysql: relational database. ◦ PHP: dynamic html. LAMP Stack Why LAMP? ◦ Linux/Unix is the top server OS (70+). Source: https://w3techs.com/technologies/overview/operating_system. ◦ Apache is the top webserver (30+%). Source: https://w3techs.com/technologies/overview/web_server. ◦ PHP is the top programming language for web development (78%). (Source: https://w3techs.com/technologies/overview/programming_language) ◦ LAMP is open source. Linux Many Linux Distributions: ◦ Most popular free distribution: Ubuntu, Debian, Fedora, CentOS. ◦ Commercial: Red Hat, SUSE. Recommend: Ubuntu, one of the most user-friendly Linux. Download Ubuntu Desktop Image: https://ubuntu.com/download/desktop If you are an experienced Linux users, you can download Server image, else it is not recommended for beginners. The server version and desktop version are different only in the packages. Desktop version comes with GUI. Install Ubuntu in Windows 11: https://ubuntu.com/tutorials/install-ubuntu-on-wsl2-on- windows-11-with-gui-support#1-overview Linux 101 Directory structure: https://www.howtogeek.com/117435/htg-explains-the-linux-directory- structure-explained/ File permission: https://www.guru99.com/file- permissions.html#:~:text=User%2C%20Group%20and%20Other,ownership%20of%20a%20file% 2Fdirectory. Basic Linux commands: https://maker.pro/linux/tutorial/basic-linux-commands-for-beginners  Basic Apache Setup Apache is an open source cross platform web server. type ‘terminal’ 1. Open Terminal. left click here 2. After Terminal appear, install Apache2 by typing the following command: ◦ sudo apt install apache2 Basic Apache Setup 3. Open your browser, e.g. Firefox. Go to http://localhost. The default webpage should appear if everything is setup correctly. Basic Apache Setup The preceding steps are the minimal steps for one to install apache. Please refer to more detail setup if you encountered any problem. e.g. https://www.digitalocean.com/community/tutorials/how-to-install-the-apache-web-server-on- ubuntu-20-04 The default webpage is at /var/www/html. You can add/modify/remove webpages in this directory. PHP Setup To install PHP in Ubuntu sudo apt install php libapache2-mod-php HTML HTML Introduction HyperText Markup Language (HTML) is the language used to write webpage. HTML documentation: https://www.w3schools.com/html/ Browser is required to view a webpage. HTML Editors You can create a HTML page with a ◦ Text editor: Notepad++, Komodo IDE, Ultraedit, Eclipse, Adobe DreamWeaver, PhpStorm ◦ WYSIWYG editor ◦ Template: Google sites, Facebook, Ebay, Shopee, … Notepad++ (Windows only) ◦ Besides HTML, also support many programming languages, e.g. C++, Java, PHP,... ◦ Syntax highlighting ◦ Multiple files editing ◦ Short cut to browser ◦ Macros Note: Most of the html pages created can be viewed by double click on them. For those, using external style sheet, you can view it using PhpStorm. PhpStorm PhpStorm from JetBrains. JetBrains provides free education license for their products. e.g. IntelliJ, PyCharm, PhpStorm… Apply your free license here https://www.jetbrains.com/community/education/#students Why PhpStorm? ◦ Free for teachers/students ◦ Code suggestions ◦ Real time error checking ◦ Shortcut to browsers WARNING If you are copying the examples from the ebook/slides to try out, it may happen that the examples do not work. The problem may due to the double quote “” in the pdf file. There are few version of double quote, you won’t notice their small differences. The following double quote will NOT work. Basic HTML Elements Default encoding: Unicode UTF-8. Nevertheless, it is better to explicitly specify the encoding. ◦