Scribd
Upload
108 views51 pages

Guru Nanak Dev Engg College: Web Technologies Laboratory (LPCIT - 107)

Wt file

Uploaded by

Umang Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
108 views51 pages

Guru Nanak Dev Engg College: Web Technologies Laboratory (LPCIT - 107)

Wt file

Uploaded by

Umang Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 51

GURU NANAK DEV ENGG COLLEGE

Web Technologies Laboratory


(LPCIT – 107)

Department - Information Technology

Submitted by: - Submitted to:-

Preet Singh Sahota Prof. Hanit Kaur

CRN :-(2021152)

URN :-(2104592)

D2-IT-B2
INDEX

EXPERIMENT Name Date Page Remarks


No.
1. Create a simple web page by writing 07-02- 1 - 2
HTML using a simple text editor, 2022
Notepad.

2. Demonstrate the use of Links, Lists and 14-02- 3 - 4


Tables in HTML. You should be able to 2022
link separate pages and create named
links within a document, using them to
build a “table of contents”.
3. Create simple Forms in HTML and 21-02- 5 - 6
demonstrate the use of various form 2022
elements like input box, textarea,
submit and radio buttons etc.
4. Demonstrate the use of cascading style 28-02- 7 – 9
sheets (CSS) (inline, internal and 2022
external) to specify various aspects of
style, such as colours and text fonts
and sizes, in HTML document.
5. Create an html file to implement the 07-03- 10 – 11
concept of document object model, 2022
different operations and event handling
using JavaScript.
6. 14-03- 12 – 19
Demonstrate the use of various 2022
selectors, filters and event handling
7. in jQuery. 28-03- 20 – 21
2022
Demonstrate the use of AJAX to
8. retrieve and manipulate the web 04-04- 22 – 25
page content. 2022

9. Demonstrate the use of GET and POST 11-04- 26 – 31


methods of AJAX. 2022
10 18-04- 32 – 34
. Creation of Web pages using HTML5 2022
11 and CSS3 . Demonstrate the use of 25-04- 35 – 39
. 2022
12 Bootstrap Framework. 02-05- 40 – 43
. 2022
Setup of development server like Xampp
13 09-05- 44 – 49
. 2022
in windows Creating web pages using
14 16-05- 50 – 57
. PHP 2022

Handling database queries with PHP

Setup of CodeIgniter framework and


to study its different components
EXPERIMENT 1 – Create a simple web page by writing HTML
using a simple text editor, Notepad.
Demonstrate the following components of the web page:
Page titles and Headings
Paragraphs and Inline images
Program :

<html>

<head>
<title>
First Practical
</title>
</head>

<body>
<h1>Experiment no : 1 </h1>
<hr>

<p>This is practical no-1. <br> In this practical we have used some


formatting tags and some other basic tags.</p>
<hr>
<img style="height:300px; width:300px; border:Solid; color:black; margin-
left: 50px;"
src="images.jpg" >
</body>

</html
OUTPUT :
EXPERIMENT 2 – Demonstrate the use of Links, Lists and Tables
in HTML. You should be able to link separate pages and create
named links within a document, using them to build a “table of
contents”.
Program-
<html>
<head>
<title> Experiment no -2 </title>
<style>

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Description</th>
<th>link</th>
</tr>
<tr>
<td><img style="height:100px; width:100px;" src="google2.0.0.jpg"></td>
<td>Google LLC is an American multinational technology company that <br>
specializes in Internet-related services and products, which include <br> a
search engine,
online advertising technologies, cloud computing, software, and hardware</td>
<td>
<a href="https://www.google.com/" target="_blank">Google</a></td>
</tr>
<tr>
<td><img s<td><img style="height:100px; width:100px;"
src="fb.png"></td>
<td>Meta Platforms, Inc., doing business as Meta and formerly known as
Facebook, Inc., <br>
is an American multinational technology conglomerate based in Menlo Park,
California. <br>
The company is the parent organization of Facebook, Instagram, and WhatsApp,
<br>
among other subsidiaries.</td>
<td>
<a href="https://www.facebook.com/" target="_blank" >Facebook</td>
</tr>
</table>
</body>
</html>

Output :
Experiment no : 3 - Create simple Forms in HTML and demonstrate
the use of various form elements like input box, textarea, submit and
radio buttons etc.
Program –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <title>New web 3</title>
</head>
<body>
<h1> Student Form</h1>
<form>
<label> Name </label>
<input type="text" name="name" required minlength="1" maxlength="10"><br>
<label> Class Roll No </label>
<input type="text" name="Roll" required minlength="4" maxlength="6"><br>
<label> Branch </label>
<input type="text" name="Branch" required><br>
<label> Image </label>
<input type="File" name="image" required ><br>
<label>Gender</label>
<input type="radio" value="male" name="gender" required>
<label>Male</label>
<input type="radio" value="female" name="gender" required>
<label>Female</label><br>
<input type="submit" value="submit">
</form>
</body>
</html>

OUTPUT :-
VALIDATION :-
EXPERIMENT 4 Demonstrate the use of cascading style sheets
(CSS) (inline, internal and external) to specify various aspects of
style, such as colours and text fonts and sizes, in HTML document.
Program :-
Exp4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>All Css Types</title>

<style>
#internal {
color: red;
font-size: .8cm;
font-family: monospace;
background-color: burlywood;

</style>
</head>
<body>
<P id="external">This is External Css file we have used some basic tags to
decorate the text.</P>

<P id=internal>This is Internal Css file we have used some basic tags to
decorate the text.</P>

<P style="color: blue; font-size: 5ch; font-family: Verdana, Geneva,


Tahoma, sans-serif; background-color: chartreuse;">This is Inline Css file we
have used som ebsic tags to decorate the text.</P>
</body>
</html>

Style.css
body{
margin: 0%;
padding: 0%;
background-color: bisque;
}
#external{
font-family: 'Times New Roman', Times, serif;
color: rgb(53, 95, 19);
font-style: italic;
font-weight: bold;
font-size: x-large;
}

OUTPUT :-
EXPERIMENT 5 :-Create an html file to implement the concept of
document object model, different operations and event handling
using JavaScript.
PROGRAM :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <title>Document</title>
</head>
<body>
<h1 style="font-weight: 700;">Click Button to Change Text inside the
paragraph</h1>
<p id="change">Going To change</p>
<button onclick="change()">TO CHANGE</button><hr>
<!-- -->

<p id="date"></p>
<button onclick="dat()">TO SEE DATE</button>
<script> function
change(){ cj=document.getElementById("change"); cj.innerHTML="Click
button to change color";
cj.style.color="blue";

function dat(){
kj.innerHTML=Date(); kj.style.f
ontSize="2vw";

</script>
</body>
</html>

OUTPUT :-
BEFORE :-

AFTER :-
EXPERIMENT 6 :- Demonstrate the use of various selectors,
filters and event handling in jQuery.
(a). jQuery filter() Method

CODE :-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("p").filter(".me").css("background-color",
"green");
});
</script>
</head>
<body>
<h1>This Is About My Self</h1>
<p>My name is Manmohan Singh</p>
<p class="me">I live in Ludhiana.</p>
<p class="me">I love Coding.</p>
<p>My best friend's are Manjot Singh and Kanhiya Kumar verma</p>
</body>
</html>

OUTPUT :-

(b).jQuery Selectors

Code :-
<!DOCTYPE html>
<html>
<head>
<title> jQuery selector</title> <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2
.1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("p").css("background-color", "green");
});
</script>
</head>
<body>
<p>Manmohan Singh</p>
<p>D2ITB2.</p>
<p>2021159.</p>
</body>
</html>

Output :-
Experiment 7 :- Demonstrate the use of AJAX to retrieve and
manipulate the web page content.
Code :
Exp7.html
<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>

</body>
</html>

ajax_info.txt

<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a technique for accessing web servers from a web page.</p>
<p>AJAX stands for Asynchronous JavaScript And XML.</p>

OUTPUT :-
Before :-

After :-
Experiment no 8 : Demonstrate the use of GET and POST
methods of AJAX.
Code :-
Exp8.a.html
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script
>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("demo_test_post.asp",
{
name: "Manmohan Singh",
city: "Ludhiana"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>

<button>Send an HTTP POST request to a page and get the result back</button>

</body>
</html>

demo_test_post.asp

dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")

Output :-
Exp8.b.html
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script
>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("demo_test.asp", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>

<button>Send an HTTP GET request to a page and get the result back</button>

</body>
</html>

demo_test.asp

response.write("This is some text from an external ASP file.")


Experiment 9 :- Creation of Web pages using HTML5 and CSS3.
Code :-
Exp9.html
<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style11.css">

<title>
Simple web Development Template
</title>
</head>

<body>
<nav class="navbar background">
<ul class="nav-list">
<div class="logo">
<img src="Exp9img.png" >
</div>
<li><a href="#web">Web Technology</a></li>
<li><a href="#program">C Programming</a></li>
<li><a href="#course">Courses</a></li>
</ul>

<div class="rightNav">
<input type="text" name="search" id="search">
<button class="btn btn-sm">Search</button>
</div>
</nav>

<section class="firstsection">
<div class="box-main">
<div class="firstHalf">
<h1 class="text-big" id="web">
Web Technology
</h1>

<p class="text-small">
HTML stands for HyperText Markup
Language. It is used to design
web pages using a markup language. HTML is
the combination of Hypertextand Markup
language. Hypertext defines the link between
the web pages. A markup language is used
to define the text document within tag which
defines the structure of web pages. HTML is a
markup languagethat is used by the browser to
manipulate text, images, and other content to
display it in the requiredformat.
</p>

</div>
</div>
</section>

<section class="secondsection">
<div class="box-main">
<div class="secondHalf">
<h1 class="text-big" id="program">C
Programming
</h1>
<p class="text-small">
C is a procedural programming language.It was
initially developed by Dennis Ritchie as a system
programming language to write operating system.
The main features of C language includelow-level
access to memory, simple set of keywords, and clean
style, these features make C language suitable for
system programming like operating systemor compiler
development.
</p>

</div>
</div>
</section>

<section class="section">
<div class="paras">
<h1 class="sectionTag text-big">Java</h1>

<p class="sectionSubTag text-small">Java has


been one of the most
popular programming language
for many years. Java is Object
Oriented. However it is not
considered as pure object oriented
as it provides support for primitive
data types (like int, char, etc) The
Java codes are first compiled into byte
code (machine independent code). Then
the byte code is run on Java Virtual
Machine (JVM) regardless of the
underlying architecture.
</p>

</div>

</section>

<footer class="background">
<p class="text-footer">
Copyright ©-All rights are reserved
</p>

</footer>
</body>

</html>

Style11.css

* {
margin: 0;
padding: 0;
}

.navbar {
display: flex;
align-items: center;
justify-content: center;
position: sticky;
top: 0;
cursor: pointer;
}
.background {
background: rgb(173, 99, 25);
background-blend-mode: darken;
background-size: cover;
}

.nav-list {
width: 70%; display:
flex; align-items: center;
}

.logo {
display: flex;
justify-content: center;align-
items: center;
}

.logo img {
width: 100px;
border-radius: 50px;
margin-top: 10px; margin-
bottom: 10px;
}

.nav-list li {
list-style: none; padding:
26px 30px;
}

.nav-list li a {
text-decoration: none;color:
white;
}

.nav-list li a:hover { color: rgb(255,


119, 0);
}

.rightnav {
width: 30%;
text-align: right;
}

#search {
padding: 5px; font-
size: 17px;
border: 2px solid grey;border-
radius: 9px;
}

.firstsection {
background-color: bisque;height:
400px;
}

.secondsection {
background-color: darksalmon;height:
400px;
}

.box-main {
display: flex;
justify-content: center;align-
items: center; color: black;
max-width: 80%;
margin: auto;
height: 80%;
}

.firsthalf {
width: 100%;
display: flex;
flex-direction: column;justify-
content: center;
}

.secondhalf {
width: 30%;
}

.secondhalf img {
width: 70%;
border: 4px solid white;border-
radius: 150px; display: block;
margin: auto;
}

.text-big {
font-family: 'Piazzolla', serif;font-weight:
bold;
font-size: 35px;
}
.text-small {
font-size: 18px;
}

.btn {
padding: 8px 20px;
margin: 7px 0;
border: 2px solid white;border-
radius: 8px; background: none;
color: white;
cursor: pointer;
}

.btn-sm {
padding: 6px 10px; vertical-
align: middle;
}

.section {
height: 400px; display:
flex; align-items: center;
justify-content: center;max-
width: 90%;
margin: auto;
}

.section-Left {
flex-direction: row-reverse;
}

.paras {
padding: 0px 65px;
}

.thumbnail img {
width: 250px;
border: 2px solid black;border-
radius: 26px; margin-top: 19px;
}

.center {
text-align: center;
}
.text-footer {
text-align: center;
padding: 30px 0;
font-family: 'Ubuntu', sans-serif;
display: flex;
justify-content: center;
color: white;
Experiment no -10 : Demonstrate the use of Bootstrap Framework.
Code :
<!DOCTYPE html>
<html lang="en">

<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">

<!-- Bootstrap CSS library -->


<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">

<!-- jQuery library -->


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>

<!-- JavaScript library -->


<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous">
</script>

<!-- Latest compiled JavaScript library -->


<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous">
</script>
</head>

<body>
<div class="container text-center">
<h1 class="text-success">Experiment no - 10</h1>
<p>Demonstrate the use of Bootstrap Framework.</p>
</div>
</body>

</html>

Output :
Experiment no 11 : Setup of development server like XAMP/
WAMP in Windows and Linux.
Steps to install xampp server :
Step 1: Download

XAMPP is a release made available by the non-profit project Apache Friends. Versions with
PHP 5.5, 5.6, or 7 are available for download on the Apache Friends website.

Step 2: Run .exe file

Once the software bundle has been downloaded, you can start the installation by double
clicking on the file with the ending .exe.

Step 3: Deactivate any antivirus software

Since an active antivirus program can negatively affect the installation process, it’s
recommended to temporarily pause any antivirus software until all XAMPP components have
successfully been installed.

Before installing XAMPP, it is advisable to disable the anti-virus program temporarily

Step 4: Deactivate UAC

User Account Control (UAC) can interfere with the XAMPP installation because it limits
writing access to the C: drive, so we recommend you deactivate this too for the duration of the
installation process. To find out how to turn off your UAC, head to the Microsoft Windows
support pages.
Step 5: Start the setup wizard

After you’ve opened the .exe file (after deactivating your antivirus program(s) and taken note
of the User Account Control, the start screen of the XAMPP setup wizard should appear
automatically. Click on ‘Next’ to configure the installation settings.

Step 6: Choose software components

Under ‘Select Components’, you have the option to exclude individual components of the
XAMPP software bundle from the installation. But for a full local test server, we recommend
you install using the standard setup and all available components. After making your choice,
click ‘Next’.
Step 7: Choose the installation directory

In this next step, you have the chance to choose where you’d like the XAMPP software packet
to be installed. If you opt for the standard setup, then a folder with the name XAMPP will be
created under C:\ for you. After you’ve chosen a location, click ‘Next’.
Step 8: Start the installation process

Once all the aforementioned preferences have been decided, click to start the installation. The
setup wizard will unpack and install the selected components and save them to the designated
directory. This process can take several minutes in total. You can follow the progress of this
installation by keeping an eye on the green loading bar in the middle of the screen.
Step 9: Windows Firewall blocking

Your Firewall may interrupt the installation process to block the some components of the
XAMPP. Use the corresponding check box to enable communication between the Apache
server and your private network or work network. Remember that making your XAMPP server
available for public networks isn’t recommended.

Step 10: Complete installation

Once all the components are unpacked and installed, you can close the setup wizard by
clicking on ‘Finish’. Click to tick the corresponding check box and open the XAMPP Control
Panel once the installation process is finished.
The XAMPP Control Panel :

Controls for the individual components of your test server can be reached through the XAMPP
Control Panel. The clear user interface logs all actions and allows you to start or stop
individual modules with a single. The XAMPP Control Panel also offers you various other
buttons, including:

Config: allows you to configure the XAMPP as well as the individual components

Netstat : shows all running processes on the local computer

Shell: opens a UNIX shell

Explorer: opens the XAMPP folder in Windows Explorer

Services: shows all services currently running in the background

Help: offers links to user forums

Quit: closes the XAMPP Control Panel


Experiment no 12 : Creating web pages using PHP.Code :

<html>
<head>
<title>Online PHP Script Execution</title>
</head>
<body>
<?php
echo "<h1>Hello, PHP!</h1>\n";
?>
</body>
</html>

Output :
Experiment No.13:- Handling database queries with PHP

Creating Database:

Code:-
// PHP code to establish connection
// with the localserver
<?php

// Username is root
$user = 'root';
$password = '';

// Database name is gfg


$database = 'gfg';

// Server is localhost with


// port number 3308
$servername='localhost:3308';
$mysqli = new mysqli($servername, $user,
$password, $database);

// Checking for connections if ($mysqli-


>connect_error) {
die('Connect Error (' .
$mysqli->connect_errno . ') '.
$mysqli->connect_error);
}

// SQL query to select data from database


$sql = "SELECT * FROM userdata ORDER BY score DESC ";
$result = $mysqli->query($sql);
$mysqli->close();
?>
// HTML code to display data in tabular format
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>GFG User Details</title>
<!-- CSS FOR STYLING THE PAGE -->
<style>
table {
margin: 0 auto;font-
size: large;
border: 1px solid black;
}

h1 {
text-align: center;color:
#006600; font-size: xx-
large;
font-family: 'Gill Sans', 'Gill Sans MT',' Calibri',
'Trebuchet MS', 'sans-serif';
}

td {
background-color: #E4F5D4;border:
1px solid black;
}

th,
td {
font-weight: bold; border: 1px
solid black;padding: 10px;
text-align: center;
}

td {
font-weight: lighter;
}
</style>
</head>

<body>
<section>
<h1>This is data from DB</h1>
<!-- TABLE CONSTRUCTION-->
<table>
<tr>
<th>GFG UserHandle</th>
<th>Practice Problems</th>
<th>Coding Score</th>
<th>GFG Articles</th>
</tr>
<!-- PHP CODE TO FETCH DATA FROM ROWS-->
<?php // LOOP TILL END OF DATA
while($rows=$result->fetch_assoc())
{
?>
<tr>
<!--FETCHING DATA FROM EACHROW
OF EVERY COLUMN-->
<td><?php echo $rows['username'];?></td>
<td><?php echo $rows['problems'];?></td>
<td><?php echo $rows['score'];?></td>
<td><?php echo $rows['articles'];?></td>
</tr>
<?php
}
?>
</table>
</section>
</body>

</html>

Output:-
Experiment No.14:- Setup of CodeIgniter framework and to study its different
components.

Step 1: Downloading CodeIgniter

Too start off you will need to download CodeIgniter and upload it to your server. Pointyour browser
to http://www.codeigniter.com/ and
click the large download button. For this tutorial we are using version 1.70.

Step 2: Installing and Exploring CodeIgniter

Once you have downloaded CodeIgniter, all you need to do is unzip it, and rename the"CodeIgniter_1.7.0" folder to
either the application name or, in this case, "ci" and upload it to your PHP and MySQLenabled server.
Now that its on your server, I'll explain what all the folders and files are for:
Step 3: Configuring CodeIgniter

Getting CI up and running is rather simple. Most of it requires you to edit a fewconfiguration files.

You need to setup CI to point to the right base URL of the app. To do this, open up
system/application/config/config.php and
edit the base_url array item to point to your server and CI folder.

Step 4: Testing CodeIgniter

We'll do a quick test to see if CI is up and running properly. Go to http://localhost/ci/ andyou


should see the following.
Step 5: Configuring CodeIgniter Cont.

If you're up and running, we should finish the configuration. We are starting to configure it specifically for our new helloworld app. If
you want to use a database with your application,(which in this tutorial we do.) open up system/application/config/database.php and
set thefollowing array items to there corresponding values. This code connects to a MySQL

database called "helloworld" on a localhost with the username "root", and the password,"root".
Additionally, since we will be using the database quite a bit, we want it to auto load so thatwe don't

have to specifically load it each time we connect. Open the


system/application/config/autoload.php file
and add 'database' to the autoload libaries array.

Currently, the CI setup will have a default controller called "welcome.php"; you can find thisin the system/application/controllers
folder. For this tutorial, delete it and open
your system/application/config/routes.php file. Change the default array item to point to the
"helloworld" controller.

CI also has a view file that we do not need. Open up the system/application/view/ folder and
delete the welcome_message.php file.
Step 6: Create the Helloworld Database

As this isn't really a tutorial on MySQL, I'll keep this section as short as possible. Create a database called "helloworld" and
run the following SQL through phpMyAdmin (or similar MySQL client).

Step 7: Create the Helloworld Model

Models are optional in CI, but it's considered best practice to use them. They are just PHPclasses that contain
functions which work with information from the database. Go ahead
and make a helloworld_model.php file
in the system/application/models folder.
In this file, create a Helloworld_model class, Helloworld_model construct and a functioncalled getData.
In the getData function we are
going to use Active Record database functions which speed up database development timeswhen working
with CI and databases. Essentially, they are simplified functions to create queries.
Step 8: Create the Helloworld Controller

Let's create a controller that will display the view, and load the model. That way, when you go to the address
http://localhost/ci/index.php/helloworld/, you will see the datafrom the database.
In the folder system/application/controllers, create a file called helloworld.php.
In this new file, we'll create a class which has the same name as the file.
Within this class, you need to create a function called "index". This is the function that will be
displayed when no other is provided - e.g. when
http://localhost/ci/index.php/helloworld/ is
visited. If, for example, we created a function called foo, we could find this as
http://localhost/ci/index.php/helloworld/foo/.

The key thing to remember is how CI structures its URLs; e.ghttp://host/codeignitordirectory/index.php/class/function.

In the controller index function, we need to load the model, query the database, and passthis queried
data to the view. To load any resources into CI e.g. libraries,
helpers, views, or, models, we use the load class. After we have loaded the model, we canaccess it through
its model name and the particular function. To pass data to a view we need to assign it to anarray
item and pass the array - which recreates the array items as a variable in the view file.

If we visited http://localhost/ci/index.php/helloworld/ now, it wouldn't work; this is becausethe view file does not exist.
Step 9: Create the Helloworld View

The view file is what the user sees and interacts with, it could be a segment of a page, orthe whole page. You can pass an
array of variables to the view through the second argument
of the load model function. To make the view for our tutorial, create a new file
called helloworld_view.php in the system/application/view folder. Next, we just need to create
our normal html, head
and body elements, and then a header and paragraph for the information from thedatabase. To display all
the records received from the database, we put it in a "foreach" loopwhich loops through all the elements.
You may have noticed that we are using php alternative syntax, this provides an convenientand time saving way to write echo
statements.

Step 10: Ta-da and Some Extras

When you visit "http://localhost/ci/index.php/helloworld/", youshould see something similar to


this.

But we aren't done yet. There are a few things you can do to improve your CodeIgniterexperience -
like removing that annoying index.php bit out of the URL. You can accomplish this task bycreating a .htaccess file in the root folder,
and adding the following code.
You'll also need to open up the config.php file in
system/application/config/ and edit the index_page array item to a blank
string.

Another nifty trick is to turn on CI's ability to parse PHP alternative syntax if itsnot
enabled by the server. To do this, open up the same file as
before, system/application/config/config.php, and set the rewrite_short_tags
array item to TRUE.

I hope all goes well! Look forward to seeing more CodeIgniter tutorials from me in thefuture.

You might also like