E-Commerce Lab Manual (1) PDF

Lab Manual for CSE 326 (E-Commerce and Web Programming Lab) Credit: 1, Contact hour: 2 Hours Per week Department of Computer Science & Engineering Varendra University Rajshahi, Bangladesh...

Lab Manual for CSE 326 (E-Commerce and Web Programming Lab) Credit: 1, Contact hour: 2 Hours Per week Department of Computer Science & Engineering Varendra University Rajshahi, Bangladesh Page 1 of 57  Varendra University Department of Computer Science and Engineering CSE 326 E-Commerce and Web Programming Laboratory Student ID Student Name Section Name of the Program Name of the Department Page 2 of 57  INDEX SL Page I INSTRUCTIONS FOR LABORATORY 4 II COURSE SYLLABUS 5 III PROGRAMMING CODE FOR LAB EXPERIMENTS 1 HTML BASIC, HEADINGS,PARAGRAPH,TEXT FORMATTING AND 8 QUOTATIONS 2 HTML LISTS AND IMAGES 13 3 HTML LINKS AND BLOCKS 18 4 HTML TABLES 20 5 HTML FORMS 24 6 CSS, BOOTSTRAP 31 7 PHP BASICS 32 8 FORM HANDLING IN PHP 41 9 PHP SESSIONS 47 10 DATABASES WITH SQL AND PHP 49 11 PHP AND MYSQL CRUD 52 12 LAB FINAL EXAMINATION 57 Page 3 of 57 INSTRUCTIONS FOR LABORATORY Do’s  Do wear ID card and follow dress code.  Do log off the computers when you finish.  Do ask for assistance if you need help.  Do keep your voice low when speaking to others in the LAB.  Do ask for assistance in downloading any software.  Do make suggestions as to how we can improve the LAB.  In case of any hardware related problem, ask LAB in charge for solution.  If you are the last one leaving the LAB, make sure that the staff in charge of the LAB is informed to close the LAB.  Be on time to LAB sessions.  Do keep the LAB as clean as possible. Don’ts o Do not use mobile phone inside the lab. o Don’t do anything that can make the LAB dirty (like eating, throwing waste papers etc). o Do not carry any external devices without permission. o Don’t move the chairs of the LAB. o Don’t interchange any part of one computer with another. o Don’t leave the computers of the LAB turned on while leaving the LAB. o Do not install or download any software or modify or delete any system files on any lab computers. o Do not damage, remove, or disconnect any labels, parts, cables, or equipment. o Don’t attempt to bypass the computer security system. o Do not read or modify other user’s file. o If you leave the lab, do not leave your personal belongings unattended. We are not responsible for any theft. Page 4 of 57  Varendra University COURSE SYLLABUS 1 Faculty Faculty of Science & Engineering 2 Department Department of CSE 3 Program B.Sc. in Computer Science and Engineering 4 Name of Course E-Commerce and Web Programming Lab 5 Course Code CSE 326 6 Trimester and Year Spring ,2021 7 Pre-requisites CSE 313 8 Status Core Course 9 Credit Hours 2 10 Section A 11 Class Hours Not Defined 12 Class Location Not Defined 13 Name (s) of Md. Toufikul Islam Academic staff / Instructor(s) 14 Contact [email protected] 15 Office 532, Jahangir Sharoni, Talaimari, Rajshahi-6204 16 Counseling Hours Not Defined 1. HTML & XHTML: The Complete Reference, Fourth Edition by Thomas A. Powell 2. CSS Cookbook by By Christopher Schmitt 17 Text Book 3. CSS: The Definitive Guide, 3rd Edition By Eric Meyer 4. Learning PHP and MySQL By Michele Davis, Jon Phillips 5. PHP Manual 6. PHP and MySql Bible By Tim Converse, Joyce Park, Clark Morgan 1. www.stackoverflow.com 2. w3schools.com 18 Reference 1. Lab Sheet 2. Text Book (PDF) 19 Equipment & Aids 3. XAMPP Software 4. Notepad++/Sublime Text Editor Page 5 of 57  This course is designed to provide the student with foundational programming knowledge and skills for application development on the Internet. The student will learn about the Web as a development platform 20 Course Description through the use of popular representative languages (such as PHP). The student will learn to plan, design, construct, and integrate basic server-side components of modern web applications including databases and scripts. The course is designed to provide the background of the following topics: 1. Technical review of the Internet and web applications 2. Overview of static and dynamic web pages 3. Overview of server-side and client-side programming 4. Server-side scripting with inline code using procedural 21 Course Objectives programming techniques 5. Programming web forms that connect with web-enabled databases and perform basic CRUD operations 6. Programming web forms that connect with web-enabled databases and perform basic CRUD operations After the successful completion of this course, students will be able to 1. Utilize a variety of basic programming structures (variables, loops, functions etc.) in a popular scripting environment on a web server. 2. Create scripts that dynamically generate web pages containing valid HTML (Hypertext Markup Language) clearly separating structure, presentation, and behaviour in the web browser. 22 Learning Outcomes 3. Develop scripts that validate form input on the server. 4. Design, program, and implement web pages that interact with web- enabled databases performing simple CRUD (Create, Read, Update, Delete) operations. 5. Identify the different issues faced by web developers such as security, file management, and web standards-compliancy. Lecture, Video Demonstration, Problem Solving, Brainstorming, Project Development, Q/A, Project Presentation 23 Teaching Methods Assessment Types Marks Attendance 10% Laboratory Report 10% Assessment Laboratory Viva-voce 10% 24 Methods Laboratory Project 20% Laboratory Final Quiz 30% Laboratory Examination 20% Total 100% Page 6 of 57  Letter Marks Grade Letter Marks Grade Point Grade % Point Grade % A+ 80-100 4.00 C+ (Plus) 50-54 2.50 25 Grading Policy (Plus) 75-79 A 3.75 C (Plain) 45-49 2.25 A- (Plain) 70-74 3.50 D (Plain) 40-44 2.00 B+ (Minus) 65-69 3.25 F (Fail)  Linking to E-mail Addresses This is an email link:SendMail  HTML Block and Inline Elements  Block-level Elements A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). The element is a block-level element. Page 18 of 57  Hello World The DIV element is a block element, and will start on a new line.  Inline element An inline element does not start on a new line and only takes up as much width as necessary. The element is an inline element. Hello World The SPAN element is an inline element, and will not start on a new line. Page 19 of 57 Lab (4) : HTML Tables  Defining an HTML Table An HTML table is defined with the tag. Each table row is defined with the tag. A table header is defined with the tag. By default, table headings are bold and centered. A table data/cell is defined with the tag. Jill Smith 50 Eve Jackson 94 Note: The elements are the data containers of the table. They can contain all sorts of HTML elements; text, images, lists, other tables, etc. An HTML Table with a Border Attribute If you do not specify a border for the table, it will be displayed without borders. A border can be added using the border attribute: Jill Smith 50 Eve Jackson 94 Page 20 of 57 [Task1]. Double Border Table, Coloring and width table, th, td { border: solid; border-width: 3px; border-color : red;} th{color:green;} td{color:blue;} ……… write the code of your table here. [Task2]. Single Border Table table, th, td { border: solid ; border-collapse: collapse; //single line border border-width: 3px; border-color : red;} th { color : green;} td { color : blue;} [Task3]. Table Cell Padding and cell spacing  Cell padding specifies the space between the cell content and its borders.  The cellspacing attribute specifies the space, in pixels, between cells. …… Or try this Page 21 of 57 [Task4]. Table caption and cell coloring using bgcolor  The tag defines a table caption. The tag must be inserted immediately after the tag. Note: You can specify only one caption per table.  bgcolor attribute allow you to give a color to the cell or to the row.   Student Marks Name Mark Ali 30 [Task5]. rowspan and colspan Attributes To combine /merge adjacent cells to create larger cell for data.  rowspan: This attribute specifies the number of rows a cell should merged.  colspan: This attribute specifies the number of columns a cell should merged. Example1: rowspan attribute Name: Bill Gates Telephone: 555 77 854 555 77 855 Page 22 of 57 Example2: colspan attribute Name Telephone Bill Gates 555 77 854 555 77 855 Page 23 of 57 Lab (5) : HTML Forms  The Element The HTML element defines a form that is used to collect user input. An HTML form contains form elements. Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more. First name: Last name: If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php". Form Attributes Attribute Usage Action Attribute The action attribute defines the action to be performed when the form is submitted Specifies the HTTP method (GET or POST) to be used when Method Attribute submitting the form data. Each input field must have a name attribute to be submitted. If the Name Attribute name attribute is omitted, the data of that input field will not be sent at all. enctype Attribute Specifies how the form-data should be encoded when submitting it to the server. can be used only if method="post". 1. Action attribute Normally, the form data is sent to a web page on the server when the user clicks on the submit button. In the example above, the form data is sent to a page on the server called "/action_page.php". This page contains a server-side script that handles the form data: If the action attribute is omitted, the action is set to the current page. Page 24 of 57 2. Method Attribute The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data: when GET is used, the submitted form data will be visible in the page address field: /action_page.php?firstname=Mickey&lastname=Mouse or: GET must NOT be used when sending sensitive information! GET is best suited for short, non-sensitive, amounts of data, because it has size limitations too. Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field. POST has no size limitations, and can be used to send large amounts of data. 3. Enctype method Value Description application/x-www-form- Default. All characters are encoded before sent (spaces are urlencoded converted to "+" symbols, and special characters are converted to ASCII HEX values) multipart/form-data No characters are encoded. This value is required when you are using forms that have a file upload control text/plain Spaces are converted to "+" symbols, but no special characters are encoded  The Element The element is the most important form element. The element can be displayed in several ways, depending on the type attribute. Type Description text Defines a one-line text input field radio Defines a radio button (selecting one of many choices) submit Defines a submit button (for submitting the form) checkbox Defines a checkbox (selecting many choices) password Defines a password field (characters are masked) Button Defines a clickable button Page 25 of 57  reset Defines a reset button (resets all form values to default values) image Defines an image as the submit button file Defines a file-select field and a "Browse..." button (for file uploads) hidden Defines a hidden input field  Input Type: text defines a one-line input field for text input: First name: Last name:  Input Type: email The is used for input fields that should contain an e-mail address. Depending on browser support, the e-mail address can be automatically validated when submitted. Some smartphones recognize the email type, and adds ".com" to the keyboard to match email input. E-mail:  Input Type: password defines a password field: User name: User password: Page 26 of 57  Input Type: radio defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: Male Female Other  Input Type: checkbox defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. I have a bike I have a car  Input Type: number The is used for input fields that should contain a numeric value. You can set restrictions on the numbers. Depending on browser support, the restrictions can apply to the input field. Quantity (between 1 and 5): or  Input Restrictions Here is a list of some common input restrictions (some are new in HTML5): Attribute Description disabled Specifies that an input field should be disabled max Specifies the maximum value for an input field maxlength Specifies the maximum number of character for an input field min Specifies the minimum value for an input field pattern Specifies a regular expression to check the input value against readonly Specifies that an input field is read only (cannot be changed) required Specifies that an input field is required (must be filled out) size Specifies the width (in characters) of an input field step Specifies the legal number intervals for an input field value Specifies the default value for an input field Page 27 of 57  Input Type: date The is used for input fields that should contain a date. Depending on browser support, a date picker can show up in the input field. Birthday:  Input Type: file The defines a file select field and a “Browse” button for file upload. Select a file:  The Element The element defines a multi-line input field (a text area): The textarea Element Attributes  rows Attribute  cols Attribute The cat was playing in the garden.  The Element (Drop-Down List) The element defines a drop-down list: Volvo Saab Fiat Audi  The Element The element defines a clickable button: Click Me! Page 28 of 57  Input Type: button defines a button:  The Submit Button defines a button for submitting a form to a form-handler. The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute: First name: Last name:  Input Type: reset The defines a reset button which resets all form values to its initial values. Email: Pin:  Input Type: hidden The defines a hidden input field. A hidden field let developers include data that cannot be seen or modified by users when a form is submitted. First name: Page 29 of 57  Grouping Form Data with The element groups related data in a form. The element defines a caption for the element. Personal information: First name: Last name: Page 30 of 57 Lab (6) : CSS and Bootstrap  CSS stands for Cascading Style Sheets  CSS describes how HTML elements are to be displayed on screen, paper, or in other media  CSS saves a lot of work. It can control the layout of multiple web pages all at once  External stylesheets are stored in CSS files The most used css properties used in a web page are as follows: 1) Color 2) Background 3) Border 4) Margin 5) Padding 6) Font 7) Links 8) Lists 9) Tables 10) Display 11) Position 12) Float 13) Align 14) Navigation Bar 15) Dropdowns  Bootstrap Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery. Page 31 of 57 Lab (7) : PHP Basics  Basic PHP Syntax PHP is a server- side language which means that PHP script will run on the web server and after execution the result will be sent to the browser as xhtml. PHP Syntax:  Each line code must end with ;  The file saved with.php extension.  Case-Sensitivity in PHP  PHP is case sensitive in: variable names  PHP is not case sensitive in: function names, keywords and classes names  Comments in PHP 1. Single line comment: //……………………………………. #................................. 2. Multiple line comment  Outputting Data to the browser PHP echo and print Statements echo and print are more or less the same. They are both used to output data to the screen. The differences are small: echo has no return value while print has a return value of 1 so it can be used in expressions. echo can take multiple parameters (although such usage is rare) while print can take one argument. echo is marginally faster than print. 1. print statement: print (string); is used to print a single string and can contain html tags, the ( ) are optional. Always return 1. Page 32 of 57 [Task1]. Write the next code and determine what the output is? The code The output [Task2]. Write the php code to print 2. echo statement: echo (str1,str2,str3,…..)  Is used to output one or more string and return nothing. Can contain html tags.  If it used to print single string the ( ) are optional.  If it used to print more than one string don’t use ( ). [Task3]. Write the next code and determine what the output is? The code The output Page 33 of 57  Variables in PHP 1. PHP Data Types You don’t have to determine the data type of a variable when it is declared. PHP supports the following data types:  String  Integer  Float (floating point numbers - also called double)  Boolean  Array  Object  NULL 2. Declaring Variables. A variable starts with the $ sign, followed by the name of the variable. When you assign a text value to a variable, put quotes around the value. [Task4]. Write the next code and determine what the output is? Page 34 of 57 3. Constants Declaration. Constants are like variables except that once they are defined they cannot be changed or undefined. A valid constant name starts with a letter or underscore (no $ sign before the constant name) to create a constant, use the define() function. Syntax define(name, value, case-insensitive)  name: Specifies the name of the constant  value: Specifies the value of the constant  case-insensitive: Specifies whether the constant name should be case- insensitive. Default is false Example1. creates a constant with a case-sensitive name: Example2.creates a constant with a case-insensitive name: Constants are Global Constants can be used across the entire function. Page 35 of 57  Concatenation in PHP You can concat two values together using the dot (. ) Example: $txt2 = "WEB Lab"; echo "Study PHP at ". $txt2. "";  Functions in PHP 1. Creating and calling functions Syntax function functionName() { code to be executed; }  A user defined function declaration starts with the word "function":  A function name can start with a letter or underscore (not a number)  Function names are NOT case-sensitive Example1. Function without parameters Output Example2. Function with parameters Page 36 of 57 Example3. Function with parameters Output Example4. Function with parameters Example5. PHP Default Argument Value The following example shows how to use a default parameter. If we call the function setHeight() ?> without arguments it takes the default value as argument: Output Page 37 of 57 Example6. PHP Functions - Returning values  Arrays in PHP 1. Indexed Arrays Arrays with a numeric index.There are two ways to create indexed arrays: The index can be assigned automatically (index always starts at 0), like this: 1. $cars = array("Volvo", "BMW", "Toyota"); or 2. the index can be assigned manually: $cars = "Volvo"; $cars = "BMW"; $cars = "Toyota"; Example1. Output Page 38 of 57  The count Function Get The Length of an Array - The count() Function Example2. Output  Loop through an Indexed Array To loop through and print all the values of an indexed array, you could use for loop. Example3. Example4. using for each loop 2. Associative Arrays Associative arrays are arrays that use named keys that you assign to them. There are two ways to create an associative array: 1. $age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43"); or: Page 39 of 57 2. $age['Peter'] = "35"; $age['Ben'] = "37"; $age['Joe'] = "43"; The named keys can then be used in a script; key can be number or string The value can be of any type. Example. $color=array(1=>”Red”,”b”=>”blue”,”g”=>”green”); Example1. Output  Foreach loop through an Associative Array To loop through and print all the values of an associative array, you could use a foreach loop. Example2. Output Page 40 of 57 Lab (8) :Form Handling in PHP  PHP Global Variables - Superglobals 1. PHP $_SERVER: $_SERVER is a PHP super global variable which holds information about headers, paths, and script locations. $_SERVER['REQUEST_METHOD']: Returns the request method used to access the page (such as POST). $_SERVER['PHP_SELF']: Returns the filename of the currently executing script. 2. PHP $_REQUEST: is used to collect data after submitting an HTML form. 3. PHP $_POST: is widely used to collect form data after submitting an HTML form with method="post". 4. PHP $_GET: can also be used to collect form data after submitting an HTML form with method="get".  Form Handling Example1. Part1. Create this web page. form.html Php contact form Name: Email: Phone: Message: Page 41 of 57 Part2. Create php file called “one.php” in www root to hold the data sent by submit button. To display the submitted data you could simply echo all the variables. Your email address is: Example 2: Modify the one.php file as follows: Example 3: Modify the one.php file as follows:  Form Validation Create the next form first in a "test_form.php" file.  Validation rules for the form above are as follows: Name Required Must only contain letters and whitespace Password Must consist of more than 8 characters. Comment Optional. Multi-line input field (textarea) Gender Required. Must select one Page 42 of 57 Example1: PHP Form Validation Example You can also store an array within the session array. Go back to our mypage.php file and edit it slightly to do this: Now run this on mypage2.php to show our new information: Note: By default, a session lasts until the user closes the browse Page 48 of 57 Lab (10) :Databases with SQL and PHP  Database Creation  Create database called Persons.  Create Table called contacts like this: ID (PK) FirstName LastName PhoneNumber Email integer (varchar) (varchar) (varchar) (varchar)  Insert three records in your table  Use the database in the next php code.  Create the main page of the user interface (index.html) Persons: Main Page Persons Information Application Welcome to my first Web Application Next is the main menu of this Application Home page Show all contacts  Creating the first page: Showing all contacts (show_all.php) Persons: Show All Contacts Persons Application: All my contacts Next is a alist of all my contacts Go back to Home page  Display the Result in an HTML Table Persons: Show All Contacts Persons Application: All my contacts Next is a alist of all my contacts Go back to Home page  Insert Data from a Form into a Database Example: We will create an HTML form that can be used to add new records to the "Persons" table. Firstname: Lastname: Age: