Doctype HTML Heading Title Title Heading Body h2 h2 P P Img A A

• Web strcture consist of : WWW, Web Browser, Web Pages
• URLs (Uniform Resource Locators), Hypertext Markup Language (HTML), and Hypertext
Transfer Protocol (HTTP), Cascading Style Sheets(CSS)
• Tag Pairs: Opening tag (<tag>) and a closing tag (</tag>), anything b/w called content.
• Attributes: Tags can have attributes like "src" for images
• Few tags only have start, Anything within the start/end tag is called content
HTML5 Document
Attributes=2
<img src= "logo.gif" alt= "logo" />
<!DOCTYPE html>
<html>
<heading>
<title>
Html Structure
</title>
</heading>
<body>
<h2>HTML Images are following</h2>

<p>HTML images are defined with the img tag are there:</p>
<img src= "logo.gif" alt= "logo" />

<a href="https://www.facebook.com" target="_blank">Facebook</a>
“_self”
target="_blank (new page open)
<h2 id=“section"> Section
“_self” 4 </h2>
(link will page on same page)
<a href="#section"> Jump to Section </a>
<table border="solid">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<li>First item</li>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Ordered and Unordered List
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
<form action="/action_page.php" method="post">

<fieldset>
<legend>Personal Info:</legend>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" value="Talha"><br>
<label for="email"></label>Email: </label>
<input type="text" name="email" required><br>
<label for="country"></label>Country: </label>
<input type="text" name="country" value="PAK" readonly><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<a href="https://www.w3schools.com">Visit W3Schools</a>

<br>
<img src="https://media.istockphoto.com/id/104731717/photo/luxury-
resort.jpg?s=612x612&w=0&k=20&c=cODMSPbYyrn1FHake1xYz9M8r15iOfGz9Aosy9Db7mI="
style="height:50px;">
</body>
</html>
H1…..h6 Heading tags
action: Specifies the URL where the form data will be sent when the user submits the form.
method: Determines how the form data is sent to the server. Common methods are GET and POST.
Form fields: Various input elements like text fields, radio buttons, checkboxes, etc., go within the
form tag.
Name - ImranAli Registration - SP20-BCS-013 Web Theory – Assignment 01
Style attributes style="”,””; Tags With Attributes brief
color: blue alt="Girl with a jacket" Alt text will displd, when img not loads
font-size: 18px <a href="https://www.facebook.com" To open link

Facebook</a>
bgcolor=#f0f0f0 <img src= "logo.gif" alt= "logo" /> Absolute URL - Links to an external image
that is hosted on another website
width="200" height="150" <img src= "google/image.png" alt= "logo" /> Relative URL - Links to an image that is
hosted within the website.
border=“1" target="_blank"> Attribute for btn, image, link etc will open
on other blank page
text-align=right; center; left ; <h2 id=“section"> Section 4 </h2> Move to other section on click
justify
<a href="#section"> Jump to Section </a>
margin:auto;
gap:20px;
font-family:verdana
• Paragraph Tags
<address>
Box 564, Disneyland, USA<br>
</address>
<code> Hellow World </code> Defines a piece of computer code
<mark>milk</mark> Highlite with yellow text
<progress id="file" value="32" max="100"> 32% </progress> Progress of task with loading icon
<p> <small>This is some smaller text.</small> </p> Defines a smaller text
<strong> IMP text, Bold
<br> Empty line
&emsp; Four spaces gap
<section>
<div class="myDiv"> div
<fieldset>
<legend>Personal Info:</legend>
</fieldset>
<li>First item</li> bullet
<ol> Ordered list. i.e 1,2,3
<li>First item</li>
</ol>
<ul> UnOrdered list. i.e bullets
<li>Red</li>
</ul>
<iframe src="https://www.w3schools.com" title="W3Schools Free Any website small frame
Online Web Tutorials">
</iframe>
<video width="320" height="240" controls> video
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls> audio
<source src="horse.mp3" type="audio/mpeg">
</audio>
<figure> Image with figure caption below
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption>
</figure>
<details>
<summary>Epcot Center</summary>
<p>click to open hidden text<p>
</details>
• Form Tags
<form action="/action_page.php" method="post">

</form>
<label for="name">Full Name:</label>
<input type="text" id="fname" name="fname">
required Mandatoty input
<input type="email" id="email" name="email" required > email
<input type="date" id="birthday" name="birthday"><br><br> date
<input type="password" id="pwd" name="pwd"><br><br> password
required Mandatoty input
<input type="email" id="email" name="email" required > email
<input type="date" id="birthday" name="birthday"><br><br> date
<input type="password" id="pwd" name="pwd"><br><br> password
<input type="radio" id="html" name="fav_language" Radio button
value="HTML">
<label for="html">HTML</label><br>
<input type="checkbox" id="vehicle1" name="vehicle1" Check boxes
value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<optgroup label="Swedish Cars"> List of items
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<input type="typeName" id="favcolor" name="favcolor" color, number, file,
value="#ff0000"> image,month,datetime, week, time, tel,
url
<input type="range" id="vol" name="vol" min="0" max="50"> Range with icon
input type="submit" value="Submit"> submit
<input type="button" onclick="alert('Hello World!')" value="Click Alert on btn click
Me!">
<input type="reset" value="Reset"> Reset form btn
• Table
<table border="solid"> <td>Data 2</td>

<tr> </tr>
<th>Header 1</th> </table>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
CSS *{ h1, h2, h3 {

Type Selector
color: #000000; color: #36C;
} }
Grouping Selector
h1.black { .black { <head>
color: #000000; color: #000000; <link rel="stylesheet" href="Stylesheet.css" media=" all" />
} } </head>
` Class Selector External CSS importing
Descendent Selector, Child Selector,
Attribute Selector.
Inline, External, Internal

.container {
<div class="container">
border: 5px solid rgb(0, 0, 0);
<div class="item">
background-color: rgb(245 197 221);
<p>1</p>
}
</div>
.item {
<div class="item">
border: 5px solid rgb(0, 0, 0);
<p>2</p>
background-color: rgb(141, 178, 226);
</div>
margin: 10px;
<div class="item">
padding: 20px;
<p>3</p>
height: 100px;
</div>
width: 100px;
<div class="item">
font-weight: bold;
<p>4</p>
font-size: 45px;
</div>
}
</div>
#intro {
font-size: 18px;
h1#intro {
color: blue; <h1 id=”intro”> I’m Intro
font-size: 18px;
</h1>
OR font-weight: bold;
color: blue;
Now only intro style will be
}
} apply to this heading
ID Selector
The ID selector in CSS is used to select and style a single unique element on a web page.
Flex. Parent: Flex-Container , Child:Flex-Items
Flexbox Elements
Flex Container Flex Item
align-content align-self
align-items order
Display flex-basis
flex-direction flex-grow
flex-flow flex-shrink
flex-wrap flex
justify-content
Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
• Margins: m-0 ……..m-5 (4, 8, 16, 24, 48)

• Padding:p-0………..p-5
• border border-dark m-5 p-5"> m-5 p-5</div>
Text Color Classess Background clr Classes

Border color classes
<span class="border border-
primary"></span>
Border Classes
Color Classes
Color Classes
Text Alignment Classes:

Spacing Classes:
# is value of pixel
Bootstrap provides three different types containers:
• .container, which has a max-width at each responsive breakpoint.
• .container-fluid, which has 100% width at all breakpoints.
• .container-{breakpoint}, which has 100% width until the specified breakpoint.
Bootstrap Grid System:
12 columns available per row.

JavaScript
• For Output
console.log( “Hello, World!” );
let num = 10;

let str = "5";
console.log(num + str); // Output: "105" (coerced string)
let num = 10;

let str = "5";
let sum = num + Number(str); // Convert str to a number
console.log(sum); // Output: 15
, let: var limited to the block of code where thy are defined.
Control Flow and Conditionals
Operators and Expressions let hour = 14;

let x = 10; if (hour < 12) {
let y = 5; console.log("Good morning!");
console.log(x + y); // Output: 15 } else if (hour < 18) {
console.log(`Sum: ${x + y}`); console.log("Good afternoon!");
} else {
Loops and Iteration
console.log("Good evening!");
for (let i = 0; i < 5; i++) {
} else{
console.log(`Iteration ${i}`);
console.log("Good evening!");
}
}
Functions Objects
function greet(name) { let person = {
return `Hello, ${name}!`; firstName: "Alice",
} lastName: "Johnson",
console.log(greet("Bob")); age: 30,
greet: function() {
Arrays return `Hello, ${this.firstName}!`;
let colors = ["red", "green", "blue"]; }
colors.push("yellow"); };
console.log(colors); console.log(person.greet());
• In HTML, JavaScript code is inserted between <script> and </script> tags.

• Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.
• Scripts can also be placed in external files:
Method Name Syntax in JavaScript Purpose
innerHTML element.innerHTML = content Sets or retrieves the HTML content within an

element.
document.write document.write(content)` Writes content directly to the HTML

document. Used for testing and simple demos
window.alert window.alert(message)` Displays an alert dialog with a message to the

user.

window.prompt window.prompt(message, defaultValue) Displays a dialog box for user input.
Used for simple input gathering.
window.confirm window.confirm(message) Displays a confirmation dialog with

OK and Cancel buttons.
window.open window.open(url, windowName, features) Opens a new browser window or tab

with specified URL and options.
window.close window.close() Closes the current browser window

or tab (if allowed).
window.scrollTo window.scrollTo(x, y) Scrolls the window to a specific

position on the page.
window.location window.location.href = newURL Manages the current URL and

performs navigation.
String.prototype.length “Hello".length Returns the length of a string.
String.prototype.indexOf "Hello".indexOf("lo") Returns the index of the first

occurrence of a substring.
String.prototype.slice "Hello".slice(1, 3)` Extracts a portion of a string.
String.prototype.replace "Hello".replace("H", "J") Replaces a substring with

another substring.
String.prototype.toUpperCase `"hello".toUpperCase() Converts a string to uppercase.
String.prototype.toLowerCase `"Hello".toLowerCase() Converts a string to lowercase.
String.prototype.trim “Hello".trim()` Removes whitespace from the

beginning and end of a string.
Laravel
For unexpected errors
php artisan optimize
php artisan cache:clear
Open Xampp, Run mySQL
Open VS Code -> Terminal -> Navigate to the directory
cd c:\xampp\htdocs
Create Project
composer create-project --prefer-dist laravel/laravel webProject
Open Project
cd c:\xampp\htdocs\webProject
Create Database of the same name of project “webProject” in Apache Server
Migrate
php artisan migrate
Run server
php artisan serve
• Creating model
php artisan make:model Vehicle -m
• Creating Controller
php artisan make:controller vehicleController

• make changes in the schema of model
php artisan migrate
• Dropping All coloums
php artisan migrate:fresh
or: php artisan migrate:reset
Migration
$table->id();
$table->string('regNo',7);
$table->integer('engineCapacity');
$table->double('costPerHour',10);
$table->unsignedBigInteger('company_id');
$table->foreign('company_id')->references('id')->on('companies')-
>onDelete('cascade'); //cascade delete all records
• Creating, Reading, Updating, Deleting
//Creating
public function create() {
return view ("vehicle/create");
}
public function store(Request $request) {
$Vehicle = new vehicle; // Must import the Model file: use
App\Models\guest;
$Vehicle->id = $request->get('id');
$Vehicle->save();
return redirect('vehicle/create')->with('status', 'id'.$Vehicle->id.'
added Successfully!');
}
//read
public function read() {
$vehicles = vehicle::all();
return view('vehicle/read')->with(['vehicles' => $vehicles]);
}
public function delete($id) {

// Delete the row pointed to by this id
Vehicle::destroy($id);
return redirect('vehicle/read')
->with('status', 'ID'.$id.' deleted Successfully!');
// --------------------------------------
}
//edit
public function edit($id) {
$vehicles = vehicle::find($id);
return view('vehicle/update')->with(['vehicles' => $vehicles
}
//update
public function update(Request $request, $id) {
$vehicle = vehicle::find($id);
$vehicle->id = $request->get('id');
$vehicle->save();
return redirect('vehicle/read')->with('status', 'ID '.$id.' updated

Successfully!');
}
• Web.PHP
//create
Route::get('vehicle/create', [vehicleController::class,'create'])-
>name('vehicle.create');
Route::get('vehicle/store', [vehicleController::class,'store'])-
>name('vehicle.store');
//delete
Route::get('vehicle/delete/{id}', [vehicleController::class,'delete'])-
>name('vehicle.delete');
//edit
Route::get('vehicle/edit/{id}', [vehicleController::class,'edit'])-
>name('vehicle.edit');
//update
Route::post('vehicle/update/{id}', [vehicleController::class,'update'])-
>name('vehicle.update');
resources -> views -> vehicle
Create:
<form action="{{ route ('vehicle.store') }}" method="post">

@csrf
Read
@foreach ($vehicles as $vehicle)

{{$vehicle->regNo}}
@endforeach
Relationship
Vehicle Model
public function company()

{
return $this->belongsTo(company::class); //student belongs to departent
1to1 relatio
}
Company model
public function vehicles()

{
return $this->hasMany(Vehicle::class);
}
File Upload
public function store(Request $request)

{
$request->validate([
'file' => 'required|mimes:pdf,xlx,csv|max:2048',
]);
$fileName = time().'.'.$request->file->extension();
//$request->file->move(public_path('uploads'), $fileName);
$request->file->storeAs('uploads', $fileName);
//....................................................
$fileWriter = new filing;
$fileWriter->fileName = $fileName;
// $fileWriter->filePath = Storage::putFilesAs($fileName);
// $fileWriter->filePath = 'C:\xampp\htdocs\SP20-BCS-
013\storage\app\uploads\\'; or
$fileWriter->filePath = storage_path('app\uploads\\'.$fileName);
//C:\xampp\htdocs\SP20-BCS-013\storage\app\uploads
$fileWriter->save();
//....................................................
// return "File has been Uploaded Successfully!";
return back()->with('message_sent', 'File has been Uploaded
Successfully!')->with('file', $fileName);
}
Q1. What is DataTable in Laravel?

Datatables is basically jQuery plugins that allows you to add advanced interaction controls to
your HTML tables data. Datatables also provide ajax for data searching and getting. you can
give very quick layout for search and sorting using Datatables. You can also implement
Datatables in your laravel application.
Q2. What is JQuery?
jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.

Doctype HTML Heading Title Title Heading Body h2 h2 P P Img A A

Uploaded by

Document Information

Original Title

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

Doctype HTML Heading Title Title Heading Body h2 h2 P P Img A A

Uploaded by

Copyright:

Available Formats

• Web strcture consist of : WWW, Web Browser, Web Pages

<img src= "logo.gif" alt= "logo" />

<h2>HTML Images are following</h2>

<img src= "logo.gif" alt= "logo" />

<a href="#section"> Jump to Section </a>

<form action="/action_page.php" method="post">

<a href="https://www.w3schools.com">Visit W3Schools</a>

Style attributes style="”,””; Tags With Attributes brief

font-size: 18px <a href="https://www.facebook.com" To open link

<form action="/action_page.php" method="post">

<table border="solid"> <td>Data 2</td>

CSS *{ h1, h2, h3 {

h1.black { .black { <head>

Inline, External, Internal

Flex. Parent: Flex-Container , Child:Flex-Items

Flex Container Flex Item

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

• Margins: m-0 ……..m-5 (4, 8, 16, 24, 48)

Text Color Classess Background clr Classes

Text Alignment Classes:

Bootstrap provides three different types containers:

• .container, which has a max-width at each responsive breakpoint.

• .container-fluid, which has 100% width at all breakpoints.

• .container-{breakpoint}, which has 100% width until the specified breakpoint.

Bootstrap Grid System:

12 columns available per row.

console.log( “Hello, World!” );

let num = 10;

console.log(num + str); // Output: "105" (coerced string)

let num = 10;

let sum = num + Number(str); // Convert str to a number

Operators and Expressions let hour = 14;

Arrays return `Hello, ${this.firstName}!`;

let colors = ["red", "green", "blue"]; }

• In HTML, JavaScript code is inserted between <script> and </script> tags.

• Scripts can also be placed in external files:

Method Name Syntax in JavaScript Purpose

innerHTML element.innerHTML = content Sets or retrieves the HTML content within an

document.write document.write(content)` Writes content directly to the HTML

window.alert window.alert(message)` Displays an alert dialog with a message to the

Method Name Syntax in JavaScript Purpose

window.confirm window.confirm(message) Displays a confirmation dialog with

window.open window.open(url, windowName, features) Opens a new browser window or tab

window.close window.close() Closes the current browser window

Method Name Syntax in JavaScript Purpose

window.scrollTo window.scrollTo(x, y) Scrolls the window to a specific

window.location window.location.href = newURL Manages the current URL and

String.prototype.length “Hello".length Returns the length of a string.

String.prototype.indexOf "Hello".indexOf("lo") Returns the index of the first

String.prototype.slice "Hello".slice(1, 3)` Extracts a portion of a string.

String.prototype.replace "Hello".replace("H", "J") Replaces a substring with

String.prototype.toUpperCase `"hello".toUpperCase() Converts a string to uppercase.

String.prototype.toLowerCase `"Hello".toLowerCase() Converts a string to lowercase.

String.prototype.trim “Hello".trim()` Removes whitespace from the

php artisan cache:clear

Open Xampp, Run mySQL

Open VS Code -> Terminal -> Navigate to the directory

composer create-project --prefer-dist laravel/laravel webProject

Create Database of the same name of project “webProject” in Apache Server

php artisan migrate

php artisan serve

php artisan make:model Vehicle -m

php artisan make:controller vehicleController