Topic 1-DEVELOPMENT OF DYNAMIC WEBPAGE.pdf

DEVELOPMENT OF DYNAMIC WEBPAGE Introduction to server-side scripting  What is Dynamic A dynamic site content can change as per website requirements provided by the computer design ? program or the users....

DEVELOPMENT OF DYNAMIC WEBPAGE Introduction to server-side scripting  What is Dynamic A dynamic site content can change as per website requirements provided by the computer design ? program or the users. The dynamic page may change with the time or as per user who use the site. Two types of Dynamic web pages that is Client side scripting and Server side scripting. Know Dynamic website design 2 How static page is loaded? 1. You will add the url of the website 2. It will look for files a. HTML b. CSS c. JS 3. It will return it back to the user’s browser 3 How dynamic site is loaded? You will enter the url of the website in browser 2. It will look for files a) HTML b) CSS c) JS 3. Inside the HTML file, it might call/retrieve data from the database through an application server 4. Once the data is retrieved from the database, the web server will return the website and required information to the user’s browser 4  Static website vs Dynamic website?  ▪To develop a dynamic website, on top of HTML.,, CSS Language to and Javascript you need to use a server side Scripting build a language dynamic website ▪Example of Server side scripting language includes: ▪Python ▪PHP ▪Perl ▪.Net ▪Java ▪etc 6 Advantage of There are lots of the advantage of Dynamic website … dynamic website? ▪Data can be updated from Content Management System or from database ▪Can be updated easily. For example, update catalog price, blog and news, announcement, pictures etc. ▪Can be integrated with other system to create a full fledge engine: eg, payment provider to create an e- commerce or booking system. Custom website design 7 List of static STATIC DYNAMIC website & government.github.com Youtube.com Dynamic christinavanessa.com netflix website Wikipedia.org 8 Core Server Client Components API Front End Browse of Web JSON r Internet Database Logic Applications Media Cache ▪ UI (Front End (DOM, Framework)) ▪ Request Layer (Web API) ▪ Back End (Database, Logic)  ▪ A Web Framework is designed to facilitate building a What is a dynamic website easily. ▪ In a web framework, there are some concepts and Web architecture need to be adhered to: Framework? Model-View-Controller (MVC) Object Relational Modelling (ORM) Routing https://shopee.com.my/search?keyword=exercise%20st epper https://shopee.com.my/search?keyword=badminton%2 0net%20portable https://shopee.com.my/m/pasti-murah https://shopee.com.my/50pcs-Full-Black-colour-3ply- kf94-Face-mask-Non-Medical-Disposable-Mask-full- Black-Face-Mask-Hitam-i.327979601.7362431580  ▪ A framework normally linked to a particular language: Framework & Libraries Libraries & Framework Language Framework using Python Framework using Java Framework using PHP Framework using Ruby Framework using Python However, you may see the same principle in different languages  ▪ In web, there are two types of Frameworks Types of Server Side: Django, Ruby on Rails Web Client Side: Angular, React, Vue Framework? We will focus on Server Side framework, for Website Application Development (WAD)  ▪ A Web Application Development Framework What is ▪ Model (M): Part of the web application that retrieve data from the MVC (Model database. View This is normally written in backend programming Controller) language using ORM principle ▪ View (V): Think of the UI Representation of a website You will normally see HTML, CSS and even JS here (WAD 1) Some framework, eg Django will have server rendering language. ▪ Controller (C): Handle the logic of our application, It will link the UI (View) to the database (Model) It also perform form handling, authentication, validation, integration with other application etc.  ▪ A Web Application Development Framework What is ▪ Model (M) (models.py): Part of the web application that retrieve data from the MVT(Model database. View This is normally written in backend programming Templates) language using ORM principle ▪ View (V): - (views.py) -controller in Handle the logic of our application, It will link the UI (View) to the database (Model) It also perform form handling, authentication, validation, integration with other application etc. ▪ Templates (T) (templates folder) -view Think of the User Interface Representation of a website You will normally see HTML, CSS and even JS here (WAD 1) Some framework, eg Django will have server rendering language. MVC Model What is ▪ Object-Relational Mapping (ORM) is a technique that Object lets you query and manipulate data from a database using Relational an object-oriented paradigm. Modelling? ▪ In ORM : A table in database is represented as a Class A column in a database is represented as a property A row in a database is represented as an Object A query in a database is represented as a method ▪ Most of modern web framework use ORM principle, including Django ORM Model Installation Create new folder S3WAD Cd into S3WAD (open command prompt from the folder created) python --version -> make sure that student is using python3 Install django - pip3 install django / pip install django Start a new django project 1) django-admin startproject hello_django -> Create a new project, project name hello_django 2) cd hello_django -> Go inside hello_django folder 1) python manage.py runserver -> run the server Open browser Open this url on browser 127.0.0.1:8000 This page will come out if everything is ok HTTP ▪ To communicate with the server, we use HTTP Protocol ▪ Invented for the Web - to retrieve HTML, Images, Documents, etc. ▪ Extended to handle data in addition to documents - RSS, Web Services, etc. ▪ Basic Concept: Make a connection - Request a document - Retrieve the document - Close the connection We can also communicate with the server to: Add new data in the database (Send data from a form) – CREATE (method: POST) Retrieve Data from the database – READ (method: GET) Update Information from the database from a form – UPDATE (method: POST) Delete Data from the database – Delete (method: DELETE) ▪ This operation is normally known as CRUD 22 Routing in What is Database operation? URL in web METHOD Database Operation POST Create (collection) GET Read POST/PUT Update DELETE Delete Website Status Code Description Status 200 OK – things are great (return the item) Codes 201 Created – after POST (HATEOAS – return location) 204 No Content (i.e. successful DELETE) 400 Bad Request (validation error, missing parms, etc.) 401 Unauthorized – Who are you? 403 Forbidden – No soup for you 404 Not Found Database Need operation Database METHOD url Description body or Operation not? =add new data for Create POST /books YES any books. /books = get all books Read GET NO /books/1 = get a book of id 1 = update a book of Update POST/PUT /books/1 YES id 1 = delete a book of Delete DELETE /books/1 NO id 1  1. Create a google sheet from in Google Drive Database -Class Student operation -Property : studentid, studentname, studentprog (POSTMAN 2. Sign in and download postman (https://www.postman.com/) ACTIVITY) 3. https://sheety.co/ 1. Paste link from google sheet in Google Drive 2. copy Database operation Paste link from (POSTMAN google sheet in ACTIVITY) Google Drive Create project Database operation (POSTMAN ACTIVITY) 28 Database operation (POSTMAN ACTIVITY) 29 METHOD : POST (BODY) { "sheet1":{ "studentid": "bcs2211099", "studentname": "SARIMAH", "studentmentor": "MAZURA" } } 30  1. Create a google sheet from in Google Drive -Class Student Database -Property : studentid, studentname, studentprog operation 2. Sign in and download postman (POSTMAN (https://www.postman.com/) ACTIVITY) 3. https://sheety.co/ 4. Paste link from google sheet in Google Drive 5. Create project 6. Open postman app 7. Enable method from sheety.co 8. Copy & paste link generated from sheety to postman 9. In postman, choose body & JSON to create code to post and edit google sheet. 10. Click send. 31 32  ▪Parameter -> Path and https://www.example.com/index.html?name1=value1&name2= parameter value2 ▪ GET parameters always start with a question mark ? This is followed by the name of the variable and the corresponding value, separated by an =. If an URL contains more than one ▪ parameter, they are separated by an Ampersand &. Example, it is used to filter content: Filtering content: ?type=green displays only green products on an e-commerce site. Sorting contents: ?sort=price_ascending sorts the displayed products by price, in this case ascending. 303.45 Practice ▪https://api.openweathermap.org/data/2.5/weather?q=D ubai&apiKey=9fd7a449d055dba26a982a3220f32aa2 exercise ▪What are the parameters in this URL? ?q=Dubai&apiKey=9fd7a449d055dba26a982a3220f32aa2 ▪Which parameter save the value of city name? q ▪Change the value of city name to Kuala Lumpur? What are the difference between temperature in Dubai and KL? KL- 303.45 Dubai-310.92  There are lots of the advantage of Dynamic website … ▪Data can be updated from Content Management Benefits of System or from database Dynamic website ▪Can be updated easily. For example, update catalog price, blog and news, announcement, pictures etc. ▪Can be integrated with other system to create a full fledge engine: eg, payment provider to create an e- commerce or booking system. Custom website design 35 DEVELOPMENT OF DYNAMIC WEBPAGE Connecting the Front & Backend  ▪All of the awesome that runs your application. ▪Web API What is a Connection layer between the frontend and backend Connected through API calls (POST, GET, PUT, etc. ) Backend? Transmit Content from the Backend to the Frontend commonly in JSON Blobs ▪Service Architecture that drives everything (Where all the logic is) Custom website design 37  The intermediate layer between front end and back-end systems. A “must have” if your APIs will be consumed by third-party services What is a ▪Attention to details: How consumable is the API (signature, content WebAPI? negotiation)? Does it comply with standards (response codes, etc.)? Is it secure? How do you handle multiple versions? Is it truly RESTful? (Respresentational State Transfer) http://kpmb.com/API/books 38  1. Availability Principles of 2. Performance Web Design 3. Reliability 4. Scalability 5. Manageability 6. Cost 39  Popular Tools Development Tools: 1. Chrome/Firefox Developer Tools 2. Postman (API) 3. Dreamweaver 4. Git / SourceTree Analytics Tools: 1. Google/Adobe Analytics