Scribd
Upload
41 views

Coding

The document is an HTML page for registering on a website called SUKSIS. It contains the basic HTML structure and links to CSS files for styling. The main content includes a heading asking users to "Join the squad", a registration form collecting a name, student ID, and course, and a submit button to register. It is responsive, adjusting the layout on smaller screens to center elements.

Uploaded by

Siti Nursyaqirah
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
41 views

Coding

The document is an HTML page for registering on a website called SUKSIS. It contains the basic HTML structure and links to CSS files for styling. The main content includes a heading asking users to "Join the squad", a registration form collecting a name, student ID, and course, and a submit button to register. It is responsive, adjusting the layout on smaller screens to center elements.

Uploaded by

Siti Nursyaqirah
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

index.

html
<!DOCTYPE html> <img src="images/logo.png">
<html lang="en"> <div class="brand-logo-
name"></div>
<head>
</a>
<meta charset="UTF-8">
<nav class="main-nav">
<meta name="viewport"
content="width=device-width, initial- <ul>
scale=1.0">
<li><a
<meta http-equiv="X-UA-Compatible" href="join.html">Register</a></li>
content="ie=edge">
</ul>
<link href="styles.css"
</nav>
rel="stylesheet">
</header>
<link href="index.css" rel="stylesheet">
<title>SUKSIS</title>
<section class="home-main-section">
</head>
<div class="img-wrapper">
<style>
<div class="badge"></div>
body
</div>
{
background-image:
url('../cukcis/images/banner.png'); <div class="call-to-action">
background-repeat: no-repeat; <h1 class="title">Suksis UiTM
Kedah</h1>
background-attachment: fixed;
<span class="subtitle">Welcome to
background-size: cover;
Suksis Registration</span>
}
<a href="join.html"
</style> class="btn">Register Now</a>
<body class="container full-height- </div>
grow">
</section>
<header class="main-header">

</body>
<a href="index.html" class="brand-
</html>
logo">
index.css align-items: flex-start;
.home-main-section { margin: 1rem;
display: flex; align-self: center;
align-items: stretch; }
justify-content: space-between;
flex-grow: 1; @media (max-width: 900px) {
} .home-main-section .img-wrapper {
background-image:
url(images/badge.png);
.home-main-section .img-wrapper {
display: none;
flex-grow: 1;
}
flex-direction: column;
display: flex;
.home-main-section {
align-items: stretch;
justify-content: center;
justify-content: flex-end;
}
}
}

.home-main-section .badge {
background-image:
url(images/badge.png);
flex-grow: 1;
min-width: 25vw;
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}

.home-main-section .call-to-action {
display: flex;
flex-direction: column;
join.html <img src="images/logo.png">
<!DOCTYPE html> <div class="brand-logo-
name"></div>
<html lang="en">
</a>
<head>
<nav class="main-nav">
<meta charset="UTF-8">
<ul>
<meta name="viewport"
content="width=device-width, initial- <li><a
scale=1.0"> href="join.html">Register</a></li>
<meta http-equiv="X-UA-Compatible" </ul>
content="ie=edge">
</nav>
<link href="styles.css"
</header>
rel="stylesheet">
<section class="join-main-section">
<link href="join.css" rel="stylesheet">
<h1 class="join-text">
<title>SUKSIS - Reg</title>
Join the
</head>
<span class="accent-
<style>
text">squad.</span>
body
</h1>
{
<form action="in.php"
background-image: method="POST" class="join-form">
url('../cukcis/images/banner.png');
<div class="input-group">
background-repeat: no-repeat;
<label
background-attachment: fixed; for="stu_name">Name:</label>
background-size: cover; <input type="text"
name="stu_name" id="stu_name"
}
required> <!----------buh php---------->
</style>
</div>
<body class="full-height-grow">
<div class="input-group">
<div class="container full-height- <!----------buh php---------->
grow">
<label>Student ID:</label>
<header class="main-header">
<input type="number"
<a href="index.html" class="brand- name="stu_id" id="stu_id" required>
logo">
</div> join.css
<div class="input-group"> .join-main-section {
<!----------buh php---------->
display: flex;
<label>Course:</label>
justify-content: space-between;
<input type="text"
align-items: center;
name="stu_course" id="stu_course
required> flex-grow: 1;
</div> }
<div class="input-group"> <br>
<br>
.join-text {
<button type="submit" class="btn"
>Register Now</button> font-size: 3.5em;

</div> font-weight: bold;

</form> margin: 0;

</section> }

</div>
.accent-text {

<footer class="main-footer"> color: #BC3A80;

<div class="container"> }

<nav class="footer-nav">
<ul> .join-form {

<li><a href="about.html">About background-color: #202027;


Us</a></li> width: 50vw;
</ul> max-width: 50%;
</nav> padding: 2rem 4rem;
</div> border-radius: 20px;
</footer> }
</body>
</html> .input-group {
margin-bottom: 2rem;
display: flex; .join-main-section {
flex-direction: column; flex-direction: column;
} justify-content: center;
}
.input-group:last-child {
margin-bottom: 0; .join-form {
} width: 80vw;
max-width: inherit;
.input-group label { margin: 2rem 0;
font-weight: bold; }
margin-bottom: .5rem; }
}

.input-group input {
outline: none;
background: none;
border: 1px solid #2E3852;
font-size: 1em;
padding: .5em;
color: inherit;
border-radius: 5px;
}

.input-group input:focus {
border-color: #596da0;
}

@media (max-width: 900px) {


in.php
<?php //statement
$stu_name = $_POST['stu_name']; $stmt = $conn-
>prepare($SELECT);
$stu_id = $_POST['stu_id'];
$stmt->bind_param("i", $stu_id);
$stu_course = $_POST['stu_course'];
$stmt->execute();
$stmt->bind_result($stu_id);
if (!empty($stu_name) || !empty($stu_id)
|| !empty($stu_course)) $stmt->store_result();
{ $rnum = $stmt->num_rows;
$host = "localhost"; if ($rnum==0)
$dbUsername = "root"; {
$dbPassword = ""; $stmt->close();
$dbname = "suksis"; $stmt = $conn->prepare($INSERT);
$stmt->bind_param("sis",
$stu_name, $stu_id, $stu_course);
$conn = new mysqli ($host,
$dbUsername, $dbPassword, $stmt->execute();
$dbname); //connection
echo "New record inserted
sucessfully";
if (mysqli_connect_error()) }
{ else
die('Connect Error('. {
mysqli_connect_errno().')'.
echo "Someone already register
mysqli_connect_error());
using this student ID";
}
}
else
$stmt->close();
{
$conn->close();
$SELECT = "SELECT stu_id From
}
student Where stu_id = ? Limit 1";
}
$INSERT = "INSERT Into student
(stu_name, stu_id, stu_course) else
values(?, ?, ?)";
{
echo "All field are }
required";
</style>
die();
}
<body class="full-height-grow">
?>
<div class="container full-height-
grow">
<!DOCTYPE html> <header class="main-header">
<html lang="en"> <a href="index.html" class="brand-
logo">
<img src="images/logo.png">
<head>
<div class="brand-logo-
<meta charset="UTF-8">
name"></div>
<meta name="viewport"
</a>
content="width=device-width, initial-
scale=1.0"> </header>
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<br><br><br>
<link href="styles.css"
rel="stylesheet">
<section class="list-main-section">
<link href="list.css" rel="stylesheet">
<div class="call-to-action">
<title>Success</title>
<h4 class="title">Student List</h4>
</head>
<a href="<?php echo
'list.php'; ?>" class="btn">List</a>
<style>
</div>
body
</section>
{
background-image:
</body>
url('../cukcis/images/banner.png');
</html>
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
connect.php <title>Suksis - List</title>
<?php </head>
$con=mysqli_connect('localhost','root','',' <style>
suksis');
body
if(!$con)
{
{
background-image:
die ("Connection Error"); url('../cukcis/images/banner.png');
} background-repeat: no-repeat;
?> background-attachment: fixed;
background-size: cover;
list.php }

<?php #customers {
include_once('connect.php'); border-collapse: collapse;
$query="select * from student"; width: 600px;
$result=mysqli_query($con,$query); line-height: 20px;
?> }

<!DOCTYPE html> #customers td, #customers th {


<html lang="en"> border: 1px solid #ddd;
<head> padding: 8px;
<meta charset="UTF-8"> }
<meta name="viewport"
content="width=device-width, initial-
#customers tr:nth-child(even)
scale=1.0">
{background-color: #340e59;}
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
#customers tr:hover {background-color:
<link href="styles.css"
black;}
rel="stylesheet">
<link href="list.css" rel="stylesheet">
#customers th { <br><br><br>
padding-top: 12px;
padding-bottom: 12px; <table align="centre"
id="customers"> <!----------buh
text-align: left;
php---------->
background-color: #eb9d0c;
color: white;
<tr>
<th colspan="4"
</style> ><h2>Namelist Student Suksis</th>

<body class="full-height-grow"> </tr>

<div class="container full-height- <tr>


grow">
<th>No.</th>
<header class="main-header">
<th>Name</th>
<a href="index.html" class="brand-
<th>Student
logo">
ID</th>
<img src="images/logo.png">
<th>Course</th>
<div class="brand-logo-
</tr>
name"></div>
<?php
</a>
$number = 1;
</header>

<br><br><br> while($rows=mysqli_fetch_assoc($result
))
{
<section class="list-main-section">
?>
<div class="call-to-action">
<tr>
<h1 class="title">List of
student</h1>
<td><?php echo $number; ?
Thank you for joining Suksis. ></td>
</div>
</section> <td><?php echo
$rows['stu_name']; ?></td>
<td><?php echo $rows['stu_id']; ? }
></td>
.icon {
<td><?php echo
$rows['stu_course']; ?></td> display: flex;
<?php ++$number; ?> flex-direction: column;
</tr> justify-content: space-between;
<?php align-items: center;
} margin: .5rem;
?> padding: .75rem;
</table> width: 100px;
</div> height: 100px;
</body> background-color: #202027;
</html> margin-bottom: 2rem;
}
list.css .icon img {
.list-main-section { width: 40px;
display: flex; }
align-items: center; @media (max-width: 800px) {
justify-content: space-between; .list-main-section {
flex-grow: 1; flex-direction: column;
} justify-content: center;
.list-main-section .covers-image { }
width: 30vw;
margin-left: 2rem; .list-main-section .covers-image {
height: auto; margin-top: 2rem;
max-width: 350px; height: 30vh;
} width: auto;
.icon-section { }
display: flex; }
style.css
.brand-logo-name {
@import margin-left: 1rem;
url('https://fonts.googleapis.com/css?
}
family=Poppins:400,500,700');

.main-nav ul, .footer-nav ul {


*, *::before, *::after {
display: flex;
box-sizing: border-box;
margin: 0;
}
padding: 0;
body {
list-style: none;
padding: 0;
}
margin: 0;
background-color: #2F303A;
.main-nav a, .footer-nav a {
font-family: Poppins, sans-serif;
color: inherit;
font-size: 1.2rem;
text-decoration: none;
color: white;
padding: 1rem;
min-height: 100vh;
}
}
.main-nav a:hover, .footer-nav a:hover {
.full-height-grow {
color: #adadad;
display: flex;
}
flex-direction: column;
.main-header, .main-footer {
}
display: flex;
.brand-logo {
justify-content: space-between;
display: flex;
align-items: center;
align-items: center;
}
font-size: 1.25em;
color: inherit;
.main-header {
text-decoration: none;
height: 140px;
}
} margin-top: 0;
}
.main-footer {
height: 70px; .subtitle {
background-color: #202027; font-weight: 500;
font-weight: bold; font-size: 1.2em;
} margin-bottom: 2rem;
}
.social-link img {
width: 1em; .btn {
margin-right: .25rem; color: white;
} background-color: #1762A7;
padding: .75rem 1.5rem;
.main-footer .container { border-radius: .5rem;
display: flex; text-decoration: none;
justify-content: space-between; font-size: .9rem;
} outline: none;
.container { border: none;
max-width: 1200px; cursor: pointer;
margin: 0 auto; }
padding: 0 40px;
flex-grow: 1; .btn:hover {
} background-color: #2180d8;
}
.title {
font-weight: 500; .btn:focus {
font-size: 3em; background-color: #2796ff;
margin-bottom: 1rem; }

You might also like