This is the exact modern stack I use for building fast, reliable PHP applications.
In this video, we will:
Download and install Laravel Herd (the fastest native PHP environment).
Set up MariaDB (our powerful, open-source database).
If you already have these installed, follow along with the configuration steps in the video.
#PHP Code
<?php
if(isset($_POST['username']) && isset($_POST['phone'])){
$username = $_POST['username'];
$phone = $_POST['phone'];
if(!empty($username) && !empty($phone)){
$result = preg_replace('/.(?=.{4})/', "#", $phone);
echo 'Username = ' .$username;
echo '<br/>';
echo 'Phone = ' .$result;
}else{
echo 'All fields are requied to fill.';
}
}
?>
#HTML Code
<form action="" method="post">
<div class="form-group">
<div class="form-control">
<label for="">Username</label>
<input type="text" name="username" id="">
</div>
<div class="form-control">
<label for="">Phone No.</label>
<input type="text" name="phone" id="">
</div>
<div class="form-control">
<input type="submit" value="Submit">
</div>
</div>
</form>
#CSS Code
body{
text-align: center;
}
form{
position: relative;
display: grid;
grid-auto-flow: column;
justify-items: center;
}
.form-group{
width: 320px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-control{
padding: 20px;
}
input[type=submit]{
cursor: pointer;
padding: 5px 10px;
}
CSS rule is a fundamental building block of cascading style sheets. We use it to style HTML Elements.
A rule consists of:
Selector -> which elements the rules applied to
Declaration block -> one or more style declarations inside { }
Declaration -> property + value pair
CSS Rule Structure
Selector{
Property: value
}
. Selector: Targets HTML Elements (head, body, div, p, etc.)
. Property: The style you want to change (color, font-size, padding, etc.)
. Value: The settings for that property (red, 13px, 10px, etc.)
Types of CSS Rules
Element selector -> p {font-size: 12px;}
Class selector -> .div{padding: 10px;}
ID selector -> #body{background-color: wheat;}
Group selector -> h1, body, div, p{font-family: arial;}
Descendant selector -> div p{font-size: 12px;}
Pseudo-classes -> a:hover{color: blue;}
Pseudo-elements -> p::first-line{font-weight: bold;}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="formvalidate.css">
<script src="formvalidate.js"></script>
</head>
<body>
<form action="formvalidate.html" method="post"
onsubmit="return formValidate();" id="myForm">
<div class="form-group">
<div class="form-control">
<label for="">Fullname</label>
<input type="text" name="fullname" id="fullname" onkeyup="chkFullname()">
</div>
<div class="form-control">
<label for="">Username</label>
<input type="text" name="username" id="username" onkeyup="chkUsername()">
</div>
<div class="form-control">
<input type="submit" value="Submit" class="btn-submit">
</div>
</div>
</form>
</body>
# CSS #
.form-group{
position: relative;
width: 320px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}
.form-control{
position: relative;
padding: 10px;
display: grid;
grid-auto-flow: column;
justify-items: center;
}
.btn-submit{
cursor: pointer;
}
# JavaScript #
function formValidate(){
var x = document.forms["myForm"]["fullname"].value;
var y = document.forms["myForm"]["username"].value;
if(x == ""){
alert("Required to fill in Fullname.");
return false;
}
if(y == ""){
alert("Required to fill in Username.");
return false;
}
if(x != "" && y != ""){
document.writeln("Successfully submited.");
document.writeln("<br/>");
document.writeln("Fullname = " + x +".");
document.writeln("<br/>");
document.writeln("Username = " + y +".");
return false;
}
}
//We don't allow special characters in Fullname
//We will only allow a to z, A to Z, 0 to 9 and space.
function chkFullname(){
var a = document.getElementById("fullname");
a.value = a.value.replace(/[^a-zA-Z0-9 ]/g, '');
}
//We will change all letters into small letters
function chkUsername(){
var b = document.getElementById("username");
b.value = b.value.toLowerCase();
b.value = b.value.replace(/[^a-zA-Z0-9]/g, '');//don't allow space
}
# HTML #
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="print.js"></script>
<link rel="stylesheet" href="print.css">
</head>
<body>
<button type="button" onclick="printDoc()">Print</button>
<p id="myId">Hello, I am Thet Naing Win. Welcome to zilastar.com.</p>
</body>
</html>
# CSS #
body{
color: red;
}
# JavaScript #function printDoc(){
var printDoc = document.getElementById("myId").innerHTML;
var a = window.open('', '', 'width=auto; height=auto');
a.document.write("<html><head><title>ZilaStar</title>");
a.document.write("<link rel='stylesheet' href='print.css'>");
a.document.write("</head>");
a.document.write("<body>");
a.document.write(printDoc);
a.document.write("</body>");
a.document.write("</html>");
a.focus();
setTimeout(function(){
a.print();
setTimeout(function(){
a.close();
}, 500)
}, 500);
}
Introduction to JavaScript
- What is JavaScript
- Use of JavaScript
- What is AJAX
- Use of AJAX
Developer Essentials
- The development workflow
- Selecting the right tools for the job
- Just enough HTML and CSS
- Understanding variables
- Understanding objects
- Making comparisons
- Understanding events
Starting to Code
- Writing your first script
- Internal vs external scripts
- Using comments in scripts
- Using the NoScript tag in HTML
Interacting with Users
- Creating alert dialogs
- Understanding conditional statements
- Getting confirmations from users
- Creating prompts for users
- Understanding functions
- Making links smarter
- Using switch/case statements
- Handling errors
JavaScript Language Essentials
- Getting started
- Creating loops
- Passing value to Functions
- Detecting objects
- Reading arrays
- Returning values from functions
- Writing arrays
- Building do and while loops
- Re-using functions
Creating Rollovers and More
- Creating a basic image rollover
- How to write a better rollover
- Creating a three-state rollover
- Making rollovers accessible and 508 complaint
- Making disjointed rollovers
- Creating slideshows
- Displaying random images
Building Smarter Forms
- Getting started
- Creating jump menus
- Creating dynamic menus
- Requiring fields
- Cross-checking fields
- Displaying more informative errors
- Verifying radio buttion selections
- Setting one field with another field
- Verifying email addresses
Handling Events
- Responding to window events
- Responding to mouse movements
- Responding to mouse clicks
- Responding to onBlur from events
- Responding to onFocus form events
- Responding to keyboard events
JS Web APIs
- Introduction to Web APIs
- Web Forms API
- Web History API
- Web Storage API
- Web Worker API
- Web Fetch API
- Web Geolocation API
JS AJAX
- Introduction to AJAX
- AJAX XML Http
- AJAX request
- AJAX response
- AJAX XML file
- AJAX PHP
- AJAX ASP
- AJAX Database
- AJAX Applications
JS JSON
- Introduction to JSON
- JSON syntax
- JSON vs XML
- JSON data types
- JSON parse
- JSON stringify
- JSON objects
- JSON arrays
- JSON server
- JSON PHP
- JSON HTML
- JSON JSONP
JS vs jQuery
- Introduction to jQuery
- jQuery selectors
- jQuery HTML
- jQuery CSS
- jQuery DOM
Working with Cookies
- The DOM, Nodes, and Objects
- Working with Dates and Times
- Real-World Applications of JavaScript
If you are preparing to create bootable usb stick and don't wanna use any command, Ventoy is suitable for you. It is open source software and so cool to use. You can use as many os iso files as your usb stick can store. If you wanna download it, please click here.
Kaspersky virus removal tool is one of the best free virus removal tools I've ever used. It is totally free and so cool to use. If you want to download it, please click here.
I've made this video for those who are taking business email service from me. I hope this video will help you in adding the business email accounts into the outlook.
To download sample outlook file
Thank you so much.
We can use PC Health Check Application to check your computer meets with minimum system requirements or not to install Windows 11.
If you want to download it, please click here.
We can use third party software such as driver easy and driver booster to update the drivers in windows. If you don't wanna use any third party software, you can update it manually. To update manually,
If you need to share your memory stick with others or you need to insert other memory sticks into your computer, you've better installed USB security guard software in your computer. Smadav is one of the best USB security guard software. If you wanna know about it, please click here.