Tugas 6 -Profile dengan Codeigniter

Codeigniter

CodeIgniter merupakan aplikasi sumber terbuka yang berupa kerangka kerja PHP dengan model MVC(Model, View, Controller) untuk membangun situs web dinamis dengan menggunakan PHP. CodeIgniter memudahkan pengembang web untuk membuat aplikasi web dengan cepat dan mudah dibandingkan dengan membuatnya dari awal. CodeIgniter dirilis pertama kali pada 28 Februari 2006.

Membuat Profile Web dengan CodeIgniter

Dalam pembuatan project ini pastikan di laptop maupun PC anda sudah terinstal PHP dan Composer. Untuk tutorialnya dapat di lihat di link di bawah ini.

Install PHP

https://www.youtube.com/watch?v=8qFWoSOAki4

Install Composer

https://www.youtube.com/watch?v=hehfb2oz8xI

1. Membuat Project baru dengan composer

Untuk membuat project baru codeigniter, ketikkan syntax ini dalam terminal:

composer create-project codeigniter4/appstarter NamaProject --no-dev

2. Membuat View, Controller dan Route

View(terletak pada folder app/views/index.php)

	<!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>Herri Purba</title>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	}

	section {
	background-color: #231e23;
	padding: 100px;
	min-height: 100vh;
	display: flex;
	width: 100%;
	position: relative;
	justify-content: space-between;
	align-items: center;
	}

	header {
	display: flex;
	justify-content: space-between;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
	padding: 40px 100px;
	align-items: center;
	color: #39a6a3;
	}

	header .logo {
	font-size: 40px;
	}

	header ul {
	display: flex;
	position: relative;
	justify-content: space-between;
	}

	header ul li {
	list-style: none;
	justify-content: space-between;
	position: relative;
	}

	header ul li a {
	position: relative;
	display: inline-block;
	margin-left: 40px;
	text-decoration: none;
	font-size: 20px;
	color: #39a6a3;
	}

	.content {
	width: 100%;
	justify-content: space-between;
	display: flex;
	align-items: center;
	position: relative;
	color: #39a6a3;
	}

	.content .about {
	max-width: 1000px;
	}

	.content .about h2 {
	font-size: 4em;
	/* padding-bottom: 10px; */
	}

	.content .about h5 {
	font-size: 1.5em;
	font-weight: 300;
	padding-bottom: 10px;
	}

	.content .about a {
	text-decoration: none;
	display: inline-block;
	background-color: #39a6a3;
	color: white;
	padding: 8px 20px;
	margin-top: 20px;
	border-radius: 40px;
	font-weight: 500;
	letter-spacing: 1px;
	}

	.content .square {
	background-color: #39a6a3;
	height: 600px;
	width: 600px;
	align-items: center;
	border-radius: 50px;

	/* position: a; */
	}

	.content .square img {
	position: absolute;
	height: 500px;
	width: 500px;
	top: 50px;
	right: 50px;
	/* align-items: center; */
	border-radius: 40px;
	}

	.sosmed {
	position: absolute;
	bottom: 100px;
	}

	.sosmed li {
	list-style: none;
	display: inline-block;
	justify-content: center;


	}

	.sosmed li a {
	width: 50px;
	height: 50px;
	margin-right: 15px;
	background-color: black;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	display: flex;
	}

	.sosmed li a img {
	filter: invert(1);
	/* color: #39a6a3; */
	height: 41px;

	transform: scale(0.5);
	}
	</style>
	</head>

	<body>
	<section>
	<header>
	<!-- <a href="#" class="Logo">Herri</a> -->
	<h1 class="logo">HP</h1>
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="/MyProfile">My Profile</a></li>
	</ul>
	</header>

	<div class="content">
	<div class="about">
	<h2>Hi, I'm Herri Purba</h2>
	<h5>Informatics Student</h5>
	<p>Hello, My name is Herri Purba. I'm 21 year's old and I'm a student in Informatics Department of Institut Teknologi Sepuluh November Surabaya.
	I'm like to learn something new and I'm quick to socialize. This website as an example to create a web profile using the Codeigniter 4
	Framework from PBKK.</p>
	<a href="#">My Profile</a>
	</div>

	<div class="square">
	<!-- <h2>asdadasd</h2> -->
	<img src="../img/profile.jpg" alt="" srcset="">
	</div>


	</div>

	<ul class="sosmed">
	<li><a href="#"><img src="../img/facebook.png" alt=""></a></li>
	<li><a href="#"><img src="../img/instagram.png" alt=""></a></li>
	<li><a href="#"><img src="../img/linkedin.png" alt=""></a></li>
	</ul>
	</section>

	</body>

	</html>

view raw index.php hosted with ❤ by GitHub

Controller(terletak pada app/controllers/home.php)

	<?php

	namespace App\Controllers;

	class Home extends BaseController
	{
	public function index()
	{
	return view('index');
	}
	}

view raw Home.php hosted with ❤ by GitHub

Route(terletak pada app/config/routes.php)

	<?php

	namespace Config;

	// Create a new instance of our RouteCollection class.
	$routes = Services::routes();

	// Load the system's routing file first, so that the app and ENVIRONMENT
	// can override as needed.
	if (file_exists(SYSTEMPATH . 'Config/Routes.php')) {
	require SYSTEMPATH . 'Config/Routes.php';
	}

	/**
	* --------------------------------------------------------------------
	* Router Setup
	* --------------------------------------------------------------------
	*/
	$routes->setDefaultNamespace('App\Controllers');
	$routes->setDefaultController('Home');
	$routes->setDefaultMethod('index');
	$routes->setTranslateURIDashes(false);
	$routes->set404Override();
	$routes->setAutoRoute(true);

	/*
	* --------------------------------------------------------------------
	* Route Definitions
	* --------------------------------------------------------------------
	*/

	// We get a performance increase by specifying the default
	// route since we don't have to scan directories.
	$routes->get('/', 'Home::index');
	$routes->add('/test', 'Test::index');

	/*
	* --------------------------------------------------------------------
	* Additional Routing
	* --------------------------------------------------------------------
	*
	* There will often be times that you need additional routing and you
	* need it to be able to override any defaults in this file. Environment
	* based routes is one such time. require() additional route files here
	* to make that happen.
	*
	* You will have access to the $routes object within that file without
	* needing to reload it.
	*/
	if (file_exists(APPPATH . 'Config/' . ENVIRONMENT . '/Routes.php')) {
	require APPPATH . 'Config/' . ENVIRONMENT . '/Routes.php';
	}

view raw Routes.php hosted with ❤ by GitHub

3. Hasil

Cari Blog Ini

PBKK