Aplikasi Profil Menggunakan Code Igniter

Website Profil Menggunakan Framework CodeIgniter4

Source Code : https://github.com/vierifath/TugasPBKK6_IntroductionWeb

 


        

            CodeIgniter adalah sebuah web application network yang bersifat open source yang digunakan untuk membangun aplikasi php dinamis. CodeIgniter menjadi sebuah framework PHP dengan model MVC (Model, View, Controller) untuk membangun website dinamis dengan menggunakan PHP yang dapat mempercepat pengembang untuk membuat sebuah aplikasi web. Selain ringan dan cepat, CodeIgniter juga memiliki dokumentasi yang super lengkap disertai dengan contoh implementasi kodenya. 

 

Langkah #1 :

Untuk dapat melakukan instalasi CodeIgniter 4 menggunakan composer, Anda harus menginstal composer terlebih dahulu di komputer Anda.

Jika Anda menggunakan Windows, Anda dapat mendownload Composer-Setup.exe pada link berikut:

https://getcomposer.org/download/

Untuk memastikan apakah composer telah terinstal dengan baik di komputer Anda, silahkan buka Terminal / Command Prompt dan ketikan perintah berikut:

composer -v

 

Jika composer terinstal dengan baik, maka akan terlihat seperti gambar berikut :



Selain itu, cek juga versi PHP Anda dengan menggunakan perintah:

php -v


Ini penting, jika versi php Anda dibawah PHP 7.2+, maka Anda tidak dapat menginstal Codeigniter 4 melalui composer.




Saya menggunakan PHP 7.4.2, jadi saya dapat menginstal Codeigniter 4 melalui composer.

Untuk menginstal Codeigniter 4 melalui composer, dapat dilakukan dengan mengetikan perintah berikut pada Terminal/ Command Prompt: 


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

 

Anda harus menginstal codeigniter 4 di dalam root web server Anda. Disini saya menggunakan XAMPP  menjadi root web server saya.

Langkah #2 : 

Mulai menulis kode! Disini saya mulai mengoding pada file welcome_message.php pada directory Views.

Berikut ini snippet code pada file welcome_message.php :  

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" type="text/css" href="<?= base_url('css/profile.css') ?>" />

	<title>Vieri Fath</title>
</head>

<body></body>

<header class="l-header">
	<nav class="nav bd-grid">
		<div>
			<a href="index.html" class="nav__logo">Vieri Fath</a>
		</div>

		<div class="nav__menu" id="nav-menu">
			<ul class="nav__list">
				<!-- <li class="nav__item"><a href="index.html" class="nav__link active">Homepage</a></li> -->
			</ul>
		</div>

		<div class="nav__toggle" id="nav-toggle">
			<i class='bx bx-menu'></i>
		</div>
	</nav>
</header>

<main class="l-main">
	<!--===== HOME =====-->
	<section class="home bd-grid" id="home">
		<div class="home__data">
			<h1 class="home__title"><span class="home__title-color">Vieri Fath Ayuba</span><br> <span class="home__ITStudent">IT Student</span></h1>
			<div class="identity">
				<p>Full Name : Vieri Fath Ayuba</p>
				<p>Student ID : 05111840000153</p>
				<p>Address: Merpati Street No. 61 Lamongan</p>
				<p>Date of Birth: October 30th, 1999</p>
				<p>Nasionality: Indonesian</p>
				<p>Mother Toungue: Indonesian</p>
			</div>
		</div>
		<div class="home__img">
			<img src="img/fotoprofil.jpg" alt="Foto Vieri">
		</div>
	</section>


	<!--===== FOOTER =====-->
	<footer class="footer">
		<p class="footer__title">Vieri Fath</p>
		<p class="ftr">Assignment #6 - Pemrograman Berbasis Kerangka Kerja (B)</p>
	</footer>

	<!--===== SCROLL REVEAL =====-->
	<!-- <script src="scrollreveal.js"></script> -->

	<!-- Script JS -->
	<!-- <script src="main.js"></script> -->
	</body>

</html>


 

Langkah #3 : Untuk mempercantik website, berikut ini baris kode CSS yang saya letakkan pada directory /public/css/profile.css :

 

/* import font */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

/*===== font shortcut =====*/
:root {
  --body-font: "Poppins", sans-serif;
}

/* color shortcut */
:root {
  --first-color: #282d53;
  --second-color: #57aec9;
  --third-color: #fff;
}

/*===== BASE =====*/
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 48px 0 0 0;
  font-family: var(--body-font);
  font-size: 15px;
  color: var(--second-color);
}

h1,
h2,
p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  max-width: 80%;
  height: auto;
  display: block;
}

/*===== LAYOUT =====*/
.bd-grid {
  max-width: 1024px;
  display: grid;
  grid-template-columns: 100%;
  grid-column-gap: 32px;
  width: calc(100% - 32px);
  margin-left: auto;
  margin-right: auto;
}
.l-header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: var(--first-color);
  box-shadow: 0 1px 4px rgba(146, 161, 176, 0.15);
}

/*===== NAV =====*/
.nav {
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.nav__item {
  margin-bottom: 0px;
  margin-left: 48px;
}
.nav__link {
  position: relative;
  color: var(--second-color);
}
.nav__link:hover {
  position: relative;
}
.nav__link:hover::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2.88px;
  left: 0;
  top: 32px;
  background-color: var(--second-color);
}

.nav__logo {
  color: var(--second-color);
  font-size: 16px;
}
.nav__toggle {
  color: var(--second-color);
  font-size: 24px;
  cursor: pointer;
  display: none;
}

.nav__list {
  display: flex;
  padding-top: 0;
  font-size: 16px;
}

/*===== HOME =====*/
.home {
  height: 700px;
  row-gap: 16px;
  margin-top: 70px;
}
.home__data {
  align-self: flex-start;
  margin-top: 60px;
  margin-right: 350px;
}
.home__title {
  font-size: 40px;
  margin-bottom: 70px;
  margin-top: 0;
  margin-right: 100 px;
}
.home__title-color {
  color: var(--first-color);
  font-size: 60px;
}

.identity {
  font-style: var(--body-font);
  color: var(--first-color);
  font-size: 23px;
}

.home__img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 400px;
  margin-right: 220px;
  margin-bottom: 90px;
}

/* ===== FOOTER =====*/
.footer {
  background-color: var(--first-color);
  color: var(--third-color);
  text-align: center;
  font-weight: 600;
  padding: 32px 0;
}
.footer__title {
  font-size: 32px;
  margin-bottom: 32px;
  font-family: var(--body-font);
}

 

Untuk mengakses source code dapat mengunjungi link github yang tertera di bawah judul. Terimakasih.

 



Comments

Post a Comment

Popular posts from this blog

TUGAS 7 PBKK - Membuat CRUD menggunakan CodeIgniter 3

Image
TUGAS 7 PBKK - Membuat CRUD menggunakan CodeIgniter 3 Source Code : https://github.com/vierifath/Tugas7PBKK-B             CodeIgniter adalah sebuah web application network yang bersifat open source yang digunakan untuk membangun aplikasi php dinamis. CodeIgniter menjadi sebuah framework PHP dengan model MVC (Model, View, Controller) untuk membangun website dinamis dengan menggunakan PHP yang dapat mempercepat pengembang untuk membuat sebuah aplikasi web. Selain ringan dan cepat, CodeIgniter juga memiliki dokumentasi yang super lengkap disertai dengan contoh implementasi kodenya.            Pada tugas 7 PBKK - B diminta untuk membuat sebuah website yang berisi create, read, update, and delete (CRUD) mahasiswa dengan menggunakan CodeIgniter. Sebelumnya, lakukan beberapa hal berikut: Install XAMPP atau Web Server Download Code Igniter Tutorial CRUD CodeIgniter Berikut tahapan untuk membuat website CRUD menggunakan CodeIgniter 3   Langkah #1 M embuat database pada mysql   Langkah
Read more

EAS PBKK B - PERABOTANKU - Aplikasi Toko Online dengan Codeigniter

Image
Kelompok: Farrel Muhammad Taqi 05111840000071 Alie Husaini R. 05111840000097 Vieri Fath Ayuba 05111840000153 Kelas: PBKK B      Pada tugas kali ini, kelompok kami membuat toko furnitur online PerabotanKu. Perabotanku adalah sistem informasi penjualan perabotan menggunakan framework CodeIgniter. Perabotanku menjual berbagai produk perabotan rumah hingga perabotan kantor.       Pada perabotanku nanti dapat diakses oleh user dan admin. User dapat berbelanja furniture pada perabotanku sementara admin memiliki otoritas mengatur sistem informasi seperti menambahkan barang, mengedit barang, menghapus barang dan melihat invoice. Berikut hasilnya: Model 1. Barang 2. Invoice 3. Pesanan 4. User View 1. Antarmuka Publik     a. Dashboard          b. Kategori: Ruang Tamu          c. Kategori: Ruang Makan          d. Kategori: Ruang Keluarga          e. Kategori: Kantor          f. Kategori: Kamar Tidur          g. Login          h. Daftar Akun      2. Antarmuka Pelanggan     a. Keranjang Belanja   
Read more

Tugas 2 PBKK - Aplikasi .NET Framework

Image
1. Instalasi Visual Studio Community 2019 1.1 Unduh Visual Studio Community 2019      Kita dapat mengunduh Visual Studio pada website  https://visualstudio.microsoft.com/ 1.2 Install Visual Studio Community 2019     Setelah proses pengunduhan, kita menjalankan Installer Visual Studio Community 2019. Ketika melakukan penginstalan, kita memilih framework yang akan digunakan dalam program aplikasi yaitu .NET Desktop Development. 2. Tutorial Membuat Aplikasi Menggunakan .NET Framework : "Hello World" 1. Buka Microsoft Visual Studio 2. Pilih Create a New Project 3. Pilih Console Application yang ingin digunakan, disini kita menggunakan Console App (.NET Framework)  3. Configure Your New Project : Atur project name dan file location 4. Tulis kode dan jalankan. Berikut ini source code untuk membuat aplikasi dengan output "Hello World" 5. Jalankan program dengan klik tombol "Start without Debugging" pada menu "Debug" atau dengan menggunakan shortcut Ctrl
Read more