• 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
  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 to Bootstrap CSS via CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Optional: Link to Bootstrap JavaScript and jQuery via CDN -->
<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.
Method Name Syntax in JavaScript Purpose
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).
Method Name Syntax in JavaScript Purpose
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.
Method Name Syntax in JavaScript Purpose
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.
