CSE3100-Lab Manual

Ahsanullah University of Science and Technology (AUST)
Department of Computer Science and Engineering
LABORATORY MANUAL
Course No.: CSE 3100
Course Title: Software Development-IV
For the students of 3rd Year, 1st semester of

B.Sc. in Computer Science and Engineering program
TABLE OF CONTENTS
COURSE OBJECTIVES .................................................................................................. 1
PREFFERED TOOLS ...................................................................................................... 1
TEXT/REFERENCE BOOK ........................................................................................... 1
ADMINISTRATIVE POLICY OF THE LABORATORY .......................................... 1
LIST OF SESSIONS ......................................................................................................... #
SESSION 1: ........................................................................................................................ 2
Getting acquainted with major concepts of HTML and CSS.
SESSION 2: ........................................................................................................................ 5
Responsive Web design, Bootstrap.
SESSION 3: ........................................................................................................................ 8
Introduction to XAMPP server and PHP.
SESSION 4: ...................................................................................................................... 11
PHP form and CVS File.
SESSION 5 & 6: ............................................................................................................... 13
Introduction to Databases with PHP.
SESSION 7: ...................................................................................................................... 16
Virtual Host, Java Script, MVC & CMS.
FINAL PROJECT SUBMISSION ................................................................................ 17

COURSE OBJECTIVES
After successful completion of this course, the students should be able to

• Understand the basic concepts of HTML, CSS, PHP and JavaScript) and tools used for web
development;
• Understand the concepts of MySQL database and designing library like Bootstrap;
• Perform the design of websites and web applications.
• Adapt modern tools and techniques to develop PHP based web application.
PREFFERED TOOL(S)
1. Sublime text
2. notepad++
3. XAMPP Server,
4. MySQL
TEXT/REFERENCE BOOK(S)
1. Learning PHP, MySQL and JavaScript with jQuery, CSS and HTML5, 4th Edition by
Robin Nixon, O’Reilly Media.
2. PHP Cookbook, Solutions and Examples for PHP programmers, 3rd Edition by Adam
Trachtenberg, David Sklar, O’Reilly Media.
ADMINISTRATIVE POLICY OF THE LABORATORY

1. Students must perform class assignment tasks individually.
2. Viva will be taken for each assignment and marks on assignment will substantially depend
on viva.
3. Students must show their project progress before final submission.
4. Plagiarism is strictly forbidden and will be dealt with punishment.
Page | 1
Session 1
OBJECTIVES:
i. Getting acquainted with major components of a C program Understand the principles of
creating a web page using html and CSS
ii. Learn the language of the web: HTML and CSS
HTML: HTML stands for Hypertext Markup Language. HTML is a Client-side language and Very
lightweight. HTML is also known as the skeleton of a webpage.
/* Instruction: Observe, Type, Compile and Run */

/*Exam of a HTML web page*/
<!DOCTYPE html>
<html>
<head>
<title>First Page</title>
</head>
<body>
<h1>First Heading</h1>
<p>First paragraph.</p>
</body>
</html>
HTML Important Elements
i. Creates headlines (h1=largest, h6=smallest)

<h1></h1> → <h6></h6>
ii. Creates a new paragraph: <p> </p>
iii. Used to format block content: <div> </div>
iv. Creates an unordered list: <ul> </ul>
v. Creates a list item: <li> </li>
vi. Adds image: <img src=“[img source url]” />
vii. Creates a hyperlink: <a href=“[link]”>[hyperlink Text]</a>
HTML Attributes
Class - The class attribute specifies one or more class names for an element.
Example:
<h1 class=“title”>Welcome</h1>
<h2 class=“second-title title”>Hello World</h2>
Page | 2
ID - The id attribute specifies a unique id for an HTML element
Example:
<h1 id=“main-title”></h1>
CSS: CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on
screen. Mainly used to design web page. It is a Client-side language.
Insert CSS in web page:
There are three ways of inserting CSS:
i. External style sheet

ii. Internal style
iii. Inline style
External style sheet

<head>
<link type="text/css" rel="stylesheet" href="mystylesheet.css“ />
</head>
Internal style
<head>
<style>
h1 {
color: red;
margin-left: 10px;
}
</style>
</head>
Inline style
<h1 style=“color: red; margin-left:10px;”>First Heading</h1>
CSS Syntax
Here,
h1{ h1 – Selection
color: red; color: red; – declaration
margin-left: 10px; color – property
} red - value
Page | 3
CSS Important Property
i. background
ii. color
iii. padding
iv. margin
v. border
vi. width
vii. height
viii. font-size
ix. font-weight
x. text-align
EXERCISES: Building Your First Web Page – Design a web page using HTML & CSS.
Page | 4
Session 2
OBJECTIVES:
i. Responsive Web design
ii. Bootstrap
Responsive Web design: Responsive Web Design is about using HTML and CSS to automatically
resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).
A responsive web design will automatically adjust for different screen sizes and viewports.
To create a responsive website, add the following <meta> tag to all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Responsive Web Design – Frameworks – Bootstrap
Bootstrap is a CSS framework which uses HTML, CSS and jQuery to make responsive web pages.
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS and it’s a world's most popular
front-end component library. Bootstrap has light but powerful plugin built on jQuery.
Bootstrap Starter template
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-tofit=no">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/main.css" />
<title>Bootstrap</title>
</head>
<body>
<h1>Welcome</h1>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Page | 5
Bootstrap Elements
Containers: Containers are the most basic layout element in Bootstrap and are required when using our
default grid system.
<div class="container">

</div>
Grid System: Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align
content.
<div class="container">
<div class="row">
<div class="col-md-4"> One of three columns </div>
</div>
</div>
Bootstrap Component
Alert:
<div class="alert alert-primary" role="alert"> A simple alert </div>
alert-secondary | alert-success | alert-danger | alert-warning | alert-info| alert-light| alert-dark
<div class="alert alert-warning alert-dismissible fade show" role="alert">

<strong>Holy guacamole!</strong>
You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
Page | 6
Button
<button type="button" class="btn btn-outline-primary">Primary</button>
btn-lg | btn-sm | btn-block
Collapse
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" ariacontrols="collapseExample">
Link with href
</a>
</p>
<div class="collapse" id="collapseExample">

<div class="card card-body">[your_content]</div>
</div>
EXERCISES: Building a responsive Web Page – Design a responsive web page using HTML,
CSS & Bootstrap.
Page | 7
Session 3
OBJECTIVE:
i. Introduction to XAMPP server
ii. Introduction to PHP
XAMPP: XAMPP (/ˈzæmp/ or /ˈɛks. æmp/) is a free and open-source cross-platform web server solution
stack package developed by Apache Friends, consisting mainly of the Apache HTTP Server, MariaDB
database, and interpreters for scripts written in the PHP and Perl programming languages.
PHP: PHP is an acronym for "PHP: Hypertext Preprocessor". It is a widely-used and open source scripting
language. PHP scripts are executed on the server
PHP Syntax
<?php
// PHP code goes here
?>
Page | 8
PHP Variables Declaration
<?php
$txt = "Hello world!";
$x = 5;
$y = 10.5;
?>
PHP Constant
<?php
define("GREETING", "Welcome to W3Schools.com!");
echo GREETING;
?>
PHP if…..else Statement
<?php
$t = date("H");
if ($t < "20") {
echo "Have a good day!";
}
?>
PHP Loops
/* While Loops*/ /* For Loops*/
<?php <?php
$x = 1; for ($x = 0; $x <= 10; $x++)
while($x <= 5) { {
echo "The number is: $x <br>"; echo "The number is: $x <br>";
$x++; }
} ?>
?>
Page | 9
PHP Function
<?php
function firstFunction() {
echo "Hello world!";
}
firstFunction(); // call the function

?>
PHP Array
$university = array(“BUET", “DU", “AUST");
$age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");
• Foreach
foreach($arr as $key=>$val ){…}
PHP SORTING ARRAY

– sort() - sort arrays in ascending order
– rsort() - sort arrays in descending order
– asort() - sort associative arrays in ascending order, according to the value
– ksort() - sort associative arrays in ascending order, according to the key
– arsort() - sort associative arrays in descending order, according to the value
– krsort() - sort associative arrays in descending order, according to the key
EXERCISES: Project selection and build your project web page using HTML, CSS and Bootstrap.
Page | 10
Session 4
1. OBJECTIVES:
i. PHP form
ii. Store data into CVS file
PHP Form
<form action =“” method=“” ></form>
/* Form Element */
– Input
<input type=“” name=“” value=“” class=“” />
– Textarea
<textarea name=“”></textarea>
– Select
<select name=“”>
<option value=“”></option>
</select>
/* INPUT Type */
• Text
• Password
• Radio
• Checkbox
• Reset
• Submit
PHP GET and POST method
GET - $_GET[‘’]
POST - $_POST[‘’]
File Upload
<input type="file" name="fileToUpload" id="fileToUpload">
<form action="upload.php" method="post" enctype="multipa rt/form-data">
Page | 11
/*upload.php file*/
2. LET’S
$target_dir WRITE A PROGRAM TOGETHER:
= "uploads/";
$target_file = $target_dir
Problem: . basename($_FILES["fileToUpload"]["name"]);
Write a program to check whether a given integer is a prime number or not.
move_uploaded_file ($_FILES["fileToUpload"]["tmp_name"], $target_file)
CSV File Read
function readCSV($csvFile){
$file_handle = fopen($csvFile, 'r');
while (!feof($file_handle) ) {
$line_of_text[] = fgetcsv($file_handle, 1024);
}
fclose($file_handle);
return $line_of_text;
}
CSV File Write
$filename ='FinalMissingData.csv';
$new_csv = fopen($filename, 'w');
$resOrder = array(
0 => "ID",
1 => "Name",
2 => “Email",
3 => “Password“
);
fputcsv($new_csv, $resOrder);
EXERCISES: Create a form which will take input (name, email, phone, message) from user.
Store these data in a CSV file/DB. Create a list view page with user ID (table view).
Page | 12
Session 5 & Session 6
OBJECTIVE:
i. Introduction to Databases with PHP
DB Connection
/*Connection Start*/ /*Connection End*/
<?php <?php
$host = 'localhost'; mysqli_close($link);
$user = ‘root'; ?>
$password = '';
$db = ‘lab';
$link = mysqli_connect($host, $user,
$password, $db);
?>
Data Query
/*Select Query*/
<?php
$email = ‘trrizvi07@gmail.com‘;
$sql = 'SELECT * FROM user WHERE user_email='.$email; $result = mysqli_query($link,
$sql) or die(mysqli_error());
?>
Page | 13
/* Data Fetch*/
<?php
$noOfData = mysqli_num_rows($result);
while($row = mysqli_fetch_row($result)){
print_r($row);
}
?>
/* Insert Query*/
• <?php
$user_name = ‘Tanzilur Rahman’;
$user_email = ‘trrizvi07@gmail.com’;
$password = md5(‘123456’);
date_default_timezone_set('Asia/Dhaka');
$currentTime = date('Y-m-d H:i:s');
$sqlInsert = 'INSERT INTO user (user_name, user_email, password, status, date_created)

VALUES (“ '.$user_name.‘ " ,“ '.$user_email.‘ “,” ’.$password.’ ”,1, "'.$currentTime.'" )';
$resultInsert = mysqli_query($link, $sqlInsert) or die(mysqli_error($link)); $lastInsertID =

mysqli_insert_id($link);
?>
PHP Session, Cookies & Redirect
*/PHP Session*/
<?php
session_start();
?>
*/PHP Cookies*/
<?php
$cookie_name = "user";
$cookie_value = "John Doe";
setcookie("TestCookie", $value, time()+3600);
?>
*/PHP Redirect*/
<?php
header('Location: http://www.aust.edu/'); die;
?>
Page | 14
Final Project Requirement: You must include following page/ content to your final project.
• Home Page
• About Us Page
• Contact Page
• Login & Registration Option
• User Profile Page
• All Service/All Product Page
• Service/Product Details Page
Page | 15
Session 7
1. OBJECTIVES:
i. Introduction to Virtual Host
ii. Introduction to Java Script
iii. Introduction to MVC & CMS
Virtual Host
Location
C:\xampp\apache\conf\extra\ httpd-vhosts.conf
<VirtualHost *:80>
DocumentRoot
"C:/xampp/htdocs"
ServerName localhost
</VirtualHost>
<VirtualHost *:80>
DocumentRoot
"C:/xampp/htdocs/project_folder_name" ServerName aust.edu
<Directory
"c:/xampp/htdocs/project_folder_name">
Order allow, deny
Allow from all
</Directory>
</VirtualHost>
Virtual Host
Location
C:\Windows\System32\drivers\etc\hosts
127.0.0.1 aust.edu
Java Script
<script src="js/jquery.min.js"></script>
<script src="js/custom.js"></script>
$(document).ready(function(){
$(‘.message .close’).on(‘click’, function(){
$(‘.message’).hide();
})
})
Page | 16
MVC: MVC is a software approach that separates application logic from presentation. In practice, it
permits your web pages to contain minimal scripting since the presentation is separate from the PHP
scripting. The Model represents your data structures.
Example: Laravel, CodeIgniter, CakePHP, Symfony, Zend
CMS: CMS means Content Management System. CMS allows developers to develop modules and
applications using core library functions, with PHP as the primary programming language. It provides
capabilities for multiple users with different permission levels to manage (all or a section of) content, data
or information of a website project, or internet / intranet application.
An example of a CMS application is a Web Application that provides the following administration, control
panel or website management functionalities:
i. Create, Edit, Publish, Archive web pages

ii. Create, Edit, Publish, Archive articles
iii. Create, Edit, Publish, Archive press releases
iv. Create, Edit, Publish, Archive blogs
v. Add / Edit events into an Event Calendar
vi. Add / Edit Inventory (products), description, product specifications, prices, photos, etc.
vii. Enter, Edit, or View orders and print packing slips and invoices
viii. View reports and statistics site data
ix. Create and Edit system users which have different permission levels to different section(s)
of the above administration
Example: WordPress, Drupal, Joomla, Magento
FINAL Project Submission

Students develop their projects in a group consists of three members. There will be a viva and
Q/A session after project submission.
Page | 17

CSE3100-Lab Manual

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

CSE3100-Lab Manual

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSE3100-Lab Manual

Uploaded by

Copyright:

Available Formats

Ahsanullah University of Science and Technology (AUST)

Department of Computer Science and Engineering

For the students of 3rd Year, 1st semester of

FINAL PROJECT SUBMISSION ................................................................................ 17

After successful completion of this course, the students should be able to

ADMINISTRATIVE POLICY OF THE LABORATORY

/* Instruction: Observe, Type, Compile and Run */

HTML Important Elements

i. Creates headlines (h1=largest, h6=smallest)

Insert CSS in web page:

There are three ways of inserting CSS:

i. External style sheet

External style sheet

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Responsive Web Design – Frameworks – Bootstrap

Bootstrap Starter template

<div class="alert alert-primary" role="alert"> A simple alert </div>

alert-secondary | alert-success | alert-danger | alert-warning | alert-info| alert-light| alert-dark

<div class="alert alert-warning alert-dismissible fade show" role="alert">

<button type="button" class="btn btn-outline-primary">Primary</button>

btn-lg | btn-sm | btn-block

<div class="collapse" id="collapseExample">

PHP if…..else Statement

/* While Loops*/ /* For Loops*/

firstFunction(); // call the function

$university = array(“BUET", “DU", “AUST");

$age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");

PHP SORTING ARRAY

<form action =“” method=“” ></form>

PHP GET and POST method

<input type="file" name="fileToUpload" id="fileToUpload">

<form action="upload.php" method="post" enctype="multipa rt/form-data">

CSV File Read

CSV File Write

/*Connection Start*/ /*Connection End*/

$sqlInsert = 'INSERT INTO user (user_name, user_email, password, status, date_created)

$resultInsert = mysqli_query($link, $sqlInsert) or die(mysqli_error($link)); $lastInsertID =

PHP Session, Cookies & Redirect

Example: Laravel, CodeIgniter, CakePHP, Symfony, Zend

i. Create, Edit, Publish, Archive web pages

Example: WordPress, Drupal, Joomla, Magento

FINAL Project Submission

You might also like

/* While Loops/ / For Loops*/

/Connection Start/ /Connection End/