闪电代写 -代写CS作业_CS代写_Finance代写_Economic代写_Statistics代写_代码代做_IT代写_加急帮助

Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

CAN302 – Technologies for e-commerce

Lab 1 – Introduction to HTML and PHP

Aim

The aim of this lab is to learn the very basics of a web server, html and PHP. At the end of this lab, you should be able to have your own webpage both html and PHP format.

Resources

1. XAMPP is an easy to install Apache server distribution containing MariaDB, PHP, and Perl. We can install our web and database server ready by simply click “next”!

You may download XAMPP installation file (Version 7.4.27-1) from LMO or it’s official website. Notice: Different version may meet different problems for the same code.

2. IDE (Integrated development environment) will help us to have a better development experience. There are many choices, such as VS code, Sublime Text, WebStorm, Brackets …… you can choose your favourite one.

3. Bootstrap3.37 was provided in Bootstrap.zip. You may download the zip file from LMO.

Tips:

1. If you are not sure why you are doing something, ask a TA. This is what they are here for.

2. The M-Dev-Store online videos are good references while our labs have different focus. If you want to be an expert, you are recommended take both labs and on-line videos.

3. The forums @ LMO are available for questions and discussions.

4. These labs are expected take more than the 2 allocated hours. You should complete them in your own time before the next lab. Practice makes perfect!

Install XAMPP:

1. Links for installation files (both Windows and Mac) can be found in LMO. Download them and install them in your own computer.

Open the XAMPP control panel, start both Apache Server and MySQL server. It will look like:

If everything works fine, by click admin button of Apache server will like this:

And by click admin button of MySQL server will like this:

Bingo! You are the web owner now!

2. Similar to any software installed on your computer, Web server is also a software. When you request a webpage to a web server, it will look the corresponding hosted files and send the results back. For Apache server, the default folder for host files is under “htdocs” folder within XAMPP application. You can find them as:

Open “htdocs”, you can see the files as:

The “dashboard” corresponding to the default pages when we visit 127.0.0.1.

You may notice “phpmyadmin” is not here. The path of URL and corresponding folders on the server can be configured. How to make it? You may figure it how “phpMyAdmin” works to understand it by yourself.

Hello CAN302 :

3. We are using the default folder “htdocs” as the root of our demo. Create a folder named “can302” under “ htdocs” folder. Create a new file named “index.html” . Edit it as following then try to visit it through your browser, it would be as:

Bingo! The webpage was done! And this webpage can be visit by any browser that can access your server/computer. Due to the intranet limitation, you may try to visit the server of different classmates.

4. Is the above one really a webpage? It seems a plain text without any code. Let’s study HTML/CSS/JS in details.

(From: https://html-css-js.com/ )

Normally Webpage consists of HTML, CSS and JS. You can refer to the above figure.

HTML is a “Markup” language. Elements are the basic components in HTML. Tags are used to mark the type of elements. HTML markup includes special "elements" such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> and many others. Normally marks are pairs. All tags have been known by the web browser. So it can identifies the element by its tag. BTW, not all elements are visible to user. For example, the elements in <head> … </head> would not be shown in the webpage.

How does one element look like? The “style” thing has been generalized as “CSS” . With CSS, you can make the webpage looks “ pretty” .

In contrast with the strong-gramma language like C or JAVA, HMTL family is a very “loose- gramma” language. In the above demo, we just have the plain text in the webpage, while the browser still can give out a result. How does it work? When the plain-text has no tag, web browser will set a default type for it. When there is no CSS specified, the default style would be applied. The loose-gramma has its obviously advantages – you can easily get some output but actually has a much higher requirement for the programmer – sometime you can make something but without understanding.

The last part of the puzzle is JS or JavaScript. Browser has JS engine which marry the best of an interpreter and a compiler. It means the JS code can be executed by the browser without server included. JS mainly used to make the webpage dynamic. A simple demo will show that. Be careful, Except “Java” in the name of JavaScript, JavaScript look like Java but NOT behave the

same.

Let’s has a simple demo with the code as:

You can open the webpage by http://localhost/can302/ again, the web should look like:

You can see it has “styles” now. Both CSS defined within <head> </head> and defined in-line with the <p> tag works. If you click the hyper-link, it would trigger the JS defined within <head></head>, the webpage would be changed to:

The background colour of H1 has been changed without server involved.

5. Separate the CSS and JS to different files.

In the demo, all codes are in one html file. Simply it is not a right way to code a real project. When codes of different functions are within one file, it would be a mission-impossible to do the update and maintenance.

Normally CSS and JS code would be separated to individual files as:

A “index2.html” has been created as:

Please notice the “css” and “js” files have been “included” by “link” and “script” tags. You can try to visit this new html file through the browser and check whether it is same as the previous one.

In this way, you can “split” the different functions to different files. Each code was in a “short” and “clear” way. Meanwhile, when you need to change something temporally, you still can write the style and js within the html code like the one in line11. Of course, it is not a good code manner and the code like that are somehow “dirty” .

Bootstrap:

6. All websites can be created from ZERO. Simply it is not a good idea. You may also hear low-code or even no-code. What are they?

For any software, people try to make some common things to be a “library” . For example, Bootstrap is a front-end framework, many CSS and JS have been pre-defined. It is like in PowerPoint, you can create your slides with many pre-defined elements. Low-code and no-code are something similar idea with the pre-defined things in a different level.

Then, you need learn what has been pre-defined in a framework before you use it. But it is still VERY important to understand the fundamental things beneath the framework. Otherwise you

can easily to code something but actually you do NOT really understand.

Let’s make it short. Bootstrap is a grid system as following:

You can divide the whole page to many rows and many columns in each row. To use bootstrap,

you need to include the corresponding js and css files in your html file. An example demo code is as following:

Please notice that the related css and js files have been included in the head part.

The webpage looks like:

Try to reduce the width of browser, then it looks as:

and:

The layout has been changed accordingly. These is a typical responsive feature of Bootstrap. Which can fit different devices like mobile, PC, Notepad, etc. since the default widths are different from each other.

There are so many tutorials about Bootstrap. The purpose of this lab is an introduction only. You can study it in details by yourself.

PHP :

7. The purpose of PHP is to make the webpage dynamic on the server side. Normally you need a database to store the dynamic data and output the dynamic html code to different users. The following is a demo to output the html content by PHP:

The PHP code has been embedded in the html code. The echo will output the string “Hello CAN302” to the final html file. Visit this webpage, it looks like: