Skip to content
Snippets Groups Projects
Commit 80340877 authored by Haikal Ardzi Shofiyyurrohman's avatar Haikal Ardzi Shofiyyurrohman
Browse files

Merge branch 'dev' into 'main'

merge: dev branch to main

See merge request if3110-2023-01-i/tugas-besar-1!8
parents fb895de7 34de0db2
Branches
Tags
No related merge requests found
Showing
with 1295 additions and 21 deletions
/client/prototype/
\ No newline at end of file
FROM php:8.0-apache
\ No newline at end of file
FROM php:8.0-apache
# Set the working directory to /var/www/html
WORKDIR /var/www/html
# Copy the current directory contents into the container at /var/www/html
COPY . /var/www/html
# Install mysqli dependency
RUN docker-php-ext-install mysqli && docker-php-ext-enable mysqli
# Expose port 80 for the web server
EXPOSE 80
# Start Apache in the foreground
CMD ["apache2-foreground"]
## Panduan Pengerjaan
Berikut adalah hal yang harus diperhatikan untuk pengumpulan tugas ini:
1. Buatlah grup pada Gitlab dengan format "IF3110-2023-01-XX", dengan XX adalah nomor kelompok (untuk K1 dan K2) atau kode kelompok (untuk K3).
2. Tambahkan anggota tim pada grup anda.
3. **Fork** pada repository ini dengan organisasi yang telah dibuat.
4. Ubah hak akses repository hasil Fork anda menjadi **private**.
5. Hal-hal yang harus diperhatikan.
* Silakan commit pada repository anda (hasil fork)
* Lakukan beberapa commit dengan pesan yang bermakna, contoh: “add register form”, “fix logout bug”, jangan seperti “final”, “benerin dikit”, “fix bug”.
* Disarankan untuk tidak melakukan commit dengan perubahan yang besar karena akan mempengaruhi penilaian (contoh: hanya melakukan satu commit kemudian dikumpulkan).
* Commit dari setiap anggota tim akan mempengaruhi penilaian.
* Jadi, setiap anggota tim harus melakukan commit yang berpengaruh terhadap proses pembuatan aplikasi.
* Sebagai panduan bisa mengikuti [semantic commit](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716).
6. Buatlah file README yang berisi:
* Deskripsi aplikasi web
* Daftar requirement
* Cara instalasi
* Cara menjalankan server
* Screenshot tampilan aplikasi (tidak perlu semua kasus, minimal 1 per halaman), dan
* Penjelasan mengenai pembagian tugas masing-masing anggota (lihat formatnya pada bagian pembagian tugas).
# TUGAS BESAR IF3110 PENGEMBANGAN APLIKASI BERBASIS WEB
Untuk Tugas Besar 1 IF3110 Pengembangan Aplikasi Berbasis Web, kami dari Kelompok I mengembangkan *website* Saranghaengbok. Saranghaengbok ditujukan sebagai media jasa titip *merchandise* K-Pop.
## Requirement
* Docker Desktop
## Instalasi
1. Clone repositori dengan *command* berikut
```
git clone https://gitlab.informatika.org/if3110-2023-01-i/tugas-besar-1.git
```
## Menjalankan Server
1. Pindah ke direktori repositori
```sh
cd tugas-besar-1
```
2. Masukkan *command* berikut ke terminal
```sh
docker compose up --build
```
3. *Copy* dan *paste* tautan di bawah di *browser*
```sh
localhost:8008/client/pages/login-page.php
```
4. Tekan "Enter"
## Tampilan Aplikasi
<br/>
<br/> <img src="public/signup.png" alt="sign up page" width="1280">
<br/>
<br/> <img src="public/signin.png" alt="sign in page" width="1280">
<br>
<br/> <img src="public/home.png" alt="catalog page" width="1280">
<br>
## Pembagian Tugas
### Server-side
Login : 13521009, 13521012
Register : 13521009, 13521012
Mock datas: 13521009
Logout : 13521009
User edit profile : 13521009
User making sales : 13521009
Database Schema : 13521009
Dockerfile, docker-compose : 13521009
Catalog : 13521012
Pagination : 13521012
Search : 13521012
User Manage : 13521012
Admin User Detail (RUD) : 13521012
### Client-side
Login : 13521009, 13521012
Register : 13521009, 13521012
Navigation bar : 13521012
User edit profile : 13521009
Cart : 13521009
User making sales : 13521009
Sidebar : 13521009, 13521012, 13521020
Catalog : 13521012
Pagination : 13521012
Search : 13521012
User Manage : 13521012
Admin User Detail (RUD) : 13521012
RWD : 13521012
\ No newline at end of file
@import url('https://fonts.googleapis.com/css?family=Inter');
*{
margin: 0;
padding: 0;
font-family: Inter;
box-sizing: border-box;
transition: 0.5;
}
.container{
max-width: 100%;
height: 100vh;
mix-blend-mode: multiply;
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
}
.account-details{
position: relative;
min-width: 50%;
min-height: 67%;
max-width: 67%;
margin-left: 15%;
margin-right: 15%;
margin-top: 5%;
border-style: ridge;
display:block;
border-radius: 10px;
border-width: 10px;
}
.account-details h1 {
margin-bottom: 10px;
/* margin-top: 5%; */
margin-left: 5%;
font-size: 30px;
}
.button-field {
display: flex;
justify-content: center;
margin: 10px;
/* border-style: ridge; */
}
.account-details button {
position: relative;
cursor: pointer;
background: #3c00a0;
color: #fff;
border-radius: 20px;
font-size: 20px;
height: 40px;
}
#edit-profile-button {
width: 50%;
}
.text-field {
/* border-style: ridge; */
display: block;
margin: 40px;
overflow: hidden;
}
.detail-label{
font-size: 20px;
}
.detail-value{
border-color: black;
border-width: 2px;
border-style: ridge;
border-radius: 10px;
display: flex;
background: linear-gradient(rgba(255,255,255,0.67), rgba(255,255,255,0.67));
width: 100%;
font-size: 36px;
padding-left: 3%;
height: 50px;
}
#cancel-edit-button, #submit-edit-button, #confirm-password-field {
display: none;
}
#cancel-edit-button, #submit-edit-button {
width: 25%;
margin-left: 10px;
margin-right : 10px;
}
.password-criteria {
color: red;
}
@media screen and ((max-width: 400px) or (max-height: 750px)) {
.account-details{
top: -5%;
}
}
\ No newline at end of file
@import url('https://fonts.googleapis.com/css?family=Inter');
*{
margin: 0;
padding: 0;
font-family: Inter;
box-sizing: border-box;
transition: 0.5;
}
.container{
max-width: 100%;
height: 100vh;
mix-blend-mode: multiply;
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
}
h1{
padding-left: 5%;
}
.Username{
text-align: center;
padding: 10px;
}
.layer{
border: outset thick;
padding-top: 2%;
padding-bottom: 2%;
background-color: #5c12b1;
color: #f2f2f2;
width: 70%;
left: 15%;
position: relative;
}
.user-stat-container{
border: ridge;
position: relative;
left: 15%;
width: 70%;
height: 20vh;
}
.stat-box{
float: left;
border: ridge;
width: 25%;
height: 20vh;
}
.detail-container{
text-align: left;
width: 70%;
left: 15%;
position: relative;
padding-top: 2%;
padding-left: 10%;
padding-right: 10%;
border:outset thick;
}
.input-field{
border: ridge;
margin: 15px 0;
border-radius: 10px;
display: flex;
align-items: center;
max-height: 65px;
transition: max-height 0.5s;
overflow: hidden;
color: black;
}
input{
width: 100%;
background: transparent;
border: 0;
outline: 0;
padding: 18px;
font-size: 20px;
}
#showpass{
border: none;
font-size: 30px;
background-color: transparent;
margin-right: 20px;
cursor: pointer;
}
.btn-field{
padding-bottom: 20px;
}
.confirm{
flex-basis: 48%;
background: #3c00a0;
width: 13%;
color: #fff;
height: 40px;
border-radius: 10px;
font-size: 20px;
border: 0;
outline: 0;
cursor: pointer;
transition: background 1s;
}
.delete-user{
float: right;
flex-basis: 48%;
width: 13%;
background: red;
color: #fff;
height: 40px;
border-radius: 10px;
font-size: 15px;
border: 0;
outline: 0;
cursor: pointer;
transition: background 1s;
}
\ No newline at end of file
@import url('https://fonts.googleapis.com/css?family=Inter');
*{
margin: 0;
padding: 0;
font-family: Inter;
box-sizing: border-box;
transition: 0.5;
}
.container{
max-width: 100%;
height: 100vh;
mix-blend-mode: multiply;
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
}
.cart-group{
padding-top: 5%;
display: block;
position: relative;
}
.cart-group h1{
margin-bottom: 10px;
margin-left: 5%;
font-size: 30px;
}
.cart-list{
/* border-style: solid; */
border-radius: 10px;
margin-left: 5%;
margin-right: 5%;
display: block;
}
.item{
margin: 15px;
border-radius: 10px;
background-color: #eaeaea;
padding: 1%;
display: flex;
}
.item-picture-group{
display:inline-block;
min-width: 20%;
min-height: 15vw;
background-color: azure;
border-radius: 10px;
margin: 10px;
}
.item-text-fields{
display:inline-block;
}
/* .item-picture{} */
.item-label{
display: block;
margin: 10px;
}
.button-field {
display:flex;
padding: 10px;
justify-content: right;
}
#checkout-button {
cursor: pointer;
color: white;
background-color: rgb(137, 62, 137);
min-width: 25%;
height: 10vh;
font-size: 20px;
border-radius : 10px;
border-color: transparent;
margin-right: 15px;
margin-bottom: 15px;
}
@media screen and ((max-width: 400px) or (max-height: 750px)) {
.cart-group{
height: 750px;
}
}
\ No newline at end of file
@import url('https://fonts.googleapis.com/css?family=Inter');
*{
margin: 0;
padding: 0;
font-family: Inter;
box-sizing: border-box;
transition: 0.5;
}
.container{
max-width: 100%;
height: 100vh;
mix-blend-mode: multiply;
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
}
.center{
text-align: center;
position: absolute;
width: 100%;
bottom: 10px;
}
.pageview{
width: 100%;
height: 85vh;
top: 0%;
flex-shrink: 0;
position: relative;
}
.catalogview{
height: 85vh;
padding-top: 20px;
text-align: center;
}
.pagination {
display: inline-block;
position: relative;
align-items: center;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border-radius: 10px;
margin: 0 4px;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
.showItem{
width: 18%;
margin: 10px;
height: 35vh;
background-color: #e9e9e9;
border-radius: 10px;
border: none;
text-align: center;
cursor: pointer;
}
.showItem img{
width: 90%;
height: 50%;
margin-bottom: 5px;
text-align: center;
}
.showItem p{
text-align: left;
margin: 5px;
}
#btnPrev {
visibility: hidden;
}
@media screen and (max-width: 850px) {
.pagination a{
padding: 4px 8px;
}
.center{
top: 85%
}
.showItem{
margin: 5px;
width: 40%;
height: 35%;
}
.showItem p{
text-align: left;
margin: 5px;
}
}
\ No newline at end of file
@import url('https://fonts.googleapis.com/css?family=Inter');
*{
margin: 0;
padding: 0;
font-family: Montserrat, "Open Sans", Arial, Helvetica, sans-serif;
font-family: Inter;
box-sizing: border-box;
transition: 0.5;
}
.container{
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0,0,50,0.8), rgba(0,0,50,0.8)), url(bg.webp);
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../image/bg.webp);
mix-blend-mode: multiply;
background-position: center;
background-size: cover;
position: relative;
}
.icon{
position: relative;
top: 10%;
left: 50%;
transform: translate(-50%, 50%);
flex-shrink: 0;
min-width: 400px;
min-height: 100px;
max-width: 740px;
max-height: 199px;
background-color: transparent;
}
.form-box{
width: 90%;
max-width: 30%;
width: 31%;
height: 31%;
min-width: 300px;
flex-shrink: 0;
position: relative;
top: 0%;
top: 10%;
left: 50%;
transform: translate(-50%, 50%);
background: #fff;
padding: 50px 60px 70px;
text-align: center;
border-radius: 25px;
}
@media screen and ((max-width: 400px) or (max-height: 750px)) {
.icon, .form-box{
top: -5%;
}
}
.form-box h1{
color: #ffffffab;
font-size: 30px;
margin-bottom: 60px;
color: #3c00a0;
font-style: normal;
font-weight: 800;
line-height: normal;
position: relative;
text-align: center;
margin-bottom: 21px;
}
.input-field{
background: #eaeaea;
background: linear-gradient(rgba(255,255,255,0.67), rgba(255,255,255,0.67));
margin: 15px 0;
border-radius: 3px;
border-radius: 10px;
display: flex;
align-items: center;
max-height: 65px;
transition: max-height 0.5s;
overflow: hidden;
color: black ;
}
input{
......@@ -60,13 +89,14 @@ input{
form p{
text-align: center;
font-size: 13px;
font-size: 20px;
margin-bottom: 10px;
color: #ffffffab;
}
form p a{
text-decoration: none;
color: #3c00a0;
text-decoration: underline;
color: #ffffffab;
}
.btn-field{
......@@ -81,6 +111,7 @@ form p a{
color: #fff;
height: 40px;
border-radius: 20px;
font-size: 20px;
border: 0;
outline: 0;
cursor: pointer;
......@@ -88,6 +119,6 @@ form p a{
}
.btn-field button.disable{
background: #eaeaea;
background: linear-gradient(#ffffffab, rgba(255,255,255,0.67));
color: #555;
}
}
\ No newline at end of file
@import url('https://fonts.googleapis.com/css?family=Inter');
*{
margin: 0;
padding: 0;
font-family: Inter;
box-sizing: border-box;
transition: 0.5;
}
.container{
max-width: 100%;
height: 100vh;
mix-blend-mode: multiply;
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
}
.purchaseform-group {
flex: 1 1 auto;
position: relative;
padding-top: 5vh;
min-width: 300px;
display: flex;
flex-direction: column;
margin-left: 10%;
margin-right: 10%;
}
.purchaseform-group h1 {
font-size: 30px;
padding-bottom: 10px;
}
#price-criteria, #quantity-criteria {
text-align : left;
font-size : small;
color: red;
padding-left: 10px;
/* color : #ffffffab; */
}
@media screen and ((max-width: 600px)) {
.input-group{
display: flex;
flex-direction: column;
}
}
#purchaseform {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.input-group {
display: flex;
flex: 1 1 auto;
}
.input-image-field {
width: 25vw;
max-height: 25vw;
display: inline-flex;
flex-direction: column;
border-radius: 10px;
transition: max-height 0.5s;
}
.input-text-fields {
flex: 1 1 auto;
padding: 10px;
display: flex;
flex-direction: column;
}
.input-field {
margin: 10px;
border-radius: 10px;
align-items: center;
background-color: #eaeaea;
transition: max-height 0.5s;
overflow: hidden;
color: black ;
}
#product_description-field{
display: flex;
}
#product_description {
flex: 1 1 auto;
resize:vertical;
background-color: transparent;
padding: 10px;
font-size: small;
border-color: transparent;
}
.input-field ::placeholder {
color: black;
}
/* #product_image {
background-color: azure;
} */
.input-field input {
width: 100%;
padding: 18px;
border-color: transparent;
}
.button-field {
width: 100%;
margin-top: 4vh;
display: flex;
flex-direction: row-reverse;
}
.button-field button{
/* flex-basis: 48%; */
min-width: 25%;
height: 5vh;
border-color: transparent;
margin-right: 15px;
/* margin-bottom: 15px; */
background: #3c00a0;
color: #fff;
border-radius: 10px;
font-size: 20px;
border: 0;
outline: 0;
cursor: pointer;
transition: background 1s;
}
#image-preview {
background-color: azure;
width: 24vw;
max-height: 24vw;
}
\ No newline at end of file
@import url('https://fonts.googleapis.com/css?family=Inter');
*{
margin: 0;
padding: 0;
font-family: Inter;
box-sizing: border-box;
transition: 0.5;
}
.container{
max-width: 100%;
height: 100vh;
mix-blend-mode: multiply;
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
}
.saleform-group {
flex: 1 1 auto;
position: relative;
padding-top: 5vh;
min-width: 300px;
display: flex;
flex-direction: column;
margin-left: 10%;
margin-right: 10%;
}
.saleform-group h1 {
font-size: 30px;
padding-bottom: 10px;
}
#price-criteria, #quantity-criteria {
text-align : left;
font-size : small;
color: red;
padding-left: 10px;
/* color : #ffffffab; */
}
@media screen and ((max-width: 600px)) {
.input-group{
display: flex;
flex-direction: column;
}
}
#saleform {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.input-group {
display: flex;
flex: 1 1 auto;
}
.input-image-field {
width: 25vw;
max-height: 25vw;
display: inline-flex;
flex-direction: column;
border-radius: 10px;
transition: max-height 0.5s;
}
.input-text-fields {
flex: 1 1 auto;
padding: 10px;
display: flex;
flex-direction: column;
}
.input-field {
margin: 10px;
border-radius: 10px;
align-items: center;
background-color: #eaeaea;
transition: max-height 0.5s;
overflow: hidden;
color: black ;
}
#product_description-field{
display: flex;
}
#product_description {
flex: 1 1 auto;
resize:vertical;
background-color: transparent;
padding: 10px;
font-size: small;
border-color: transparent;
}
.input-field ::placeholder {
color: black;
}
/* #product_image {
background-color: azure;
} */
.input-field input {
width: 100%;
padding: 18px;
border-color: transparent;
}
.button-field {
width: 100%;
margin-top: 4vh;
display: flex;
flex-direction: row-reverse;
}
.button-field button{
/* flex-basis: 48%; */
min-width: 25%;
height: 5vh;
border-color: transparent;
margin-right: 15px;
/* margin-bottom: 15px; */
background: #3c00a0;
color: #fff;
border-radius: 10px;
font-size: 20px;
border: 0;
outline: 0;
cursor: pointer;
transition: background 1s;
}
#image-preview {
background-color: azure;
width: 24vw;
max-height: 24vw;
}
\ No newline at end of file
img{
float: left;
margin: 10px;
min-width: 100px;
min-height: 50px;
}
.tabgroup{
background-color: #AA1E1E;
color: #eaeaea;
outline: none;
font-size: 17px;
width: 100%;
height: 8%;
position: relative;
}
.searchbar {
float: left;
padding: 6px;
background: linear-gradient(rgba(255,255,255,0.67), rgba(255,255,255,0.67));
margin-top: 15px;
margin-left: 10%;
border-radius: 10px;
display: flex;
align-items: center;
max-height: 35px;
transition: max-height 0.5s;
overflow: hidden;
width: 35%;
}
.searchbar input{
background-color: transparent;
border: none;
font-size: 20px;
margin-left: 10px;
width: 100%;
}
input{
width: 100%;
background: transparent;
border: 0;
outline: 0;
}
.tabexpand{
background-color: #AA1E1E;
color: #eaeaea;
float: left;
border: none;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
font-size: 30px;
padding: 14px 14px;
width: 5%;
height: 100%;
}
.search{
background-color: transparent;
color: #eaeaea;
border: none;
outline: none;
cursor: pointer;
font-size: 17px;
padding: 17px 0px;
width: 10%;
text-align: center;
border-radius: 10px;
height: 100%;
}
.tabbutton{
background-color: #AA1E1E;
color: #eaeaea;
float: left;
border: none;
outline: none;
cursor: pointer;
font-size: 17px;
padding: 14px 16px;
width: 13%;
}
.tabright{
background-color: #AA1E1E;
color: #eaeaea;
float: right;
border: none;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
font-size: 30px;
padding: 17px 14px;
width: 13%;
height: 100%;
}
.tabaccount{
background-color: #AA1E1E;
color: #eaeaea;
float: right;
border: none;
outline: none;
cursor: pointer;
text-align: center;
font-size: 30px;
padding: 14px 16px;
width: 5%;
margin-left: 50px;
}
@media screen and (max-width: 850px){
.tabaccount, .tabright{
font-size: 8px;
width: 17%;
height: 100%;
}
.tabexpand{
font-size: 15px;
width: 10%;
}
.searchbar{
margin-left: 5%;
width: 50%;
margin-top: 7px;
}
img{
display: none;
}
}
@media screen and (max-width: 1350px) and (min-width: 851px) {
.tabaccount, .tabright{
font-size: 25px;
}
.tabexpand{
font-size: 25px;
}
}
.tabbutton:hover{
background-color: #3c00a0;
color: #fff;
transition: 0.2s;
}
.tabaccount:hover{
background-color: #3c00a0;
color: #fff;
transition: 0.2s;
}
.tabexpand:hover{
background-color: #3c00a0;
color: #fff;
transition: 0.2s;
}
.tabright:hover{
background-color: #3c00a0;
color: #fff;
transition: 0.2s;
}
.search:hover{
background-color: #eaeaea;
color: #555;
transition: 0.2s;
}
@import url('https://fonts.googleapis.com/css?family=Inter');
.sidebar{
width: 13%;
top: 8%;
left: -20%;
padding-top: 2vh;
background-color: rgb(12, 12, 82);
height: 92%;
transition: all 0.2s;
position: fixed;
}
.sidebar li{
list-style-type: none;
margin-bottom: 15px;
margin-left: 10px;
padding-bottom: 10px;
}
.sidebar li a{
font-size: 15px;
margin-left: 2px;
color: #fff;
text-decoration: none;
display: block;
}
#logout{
position: absolute;
bottom: 10px;
}
@import url('https://fonts.googleapis.com/css?family=Inter');
*{
margin: 0;
padding: 0;
font-family: Inter;
box-sizing: border-box;
transition: 0.5;
}
.container{
max-width: 100%;
height: 100vh;
mix-blend-mode: multiply;
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
}
h1{
text-align: center;
padding: 10px;
}
.tablebox{
width: 100%;
position: relative;
overflow: scroll;
border :outset #5e5e5e thick;
height: 100vh;
padding: 10px;
}
#table-container{
width: 100%;
height: auto;
position: relative;
}
table, th, td {
border: 1px solid #ddd;
border-collapse: collapse;
}
.fa-caret-down{
float: right;
}
table{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
height: auto;
}
.contenttable{
cursor: pointer;
}
th {
padding: 20px;
text-align: left;
background-color: #5c12b1;
color: white;
}
td{
text-align: left;
padding: 10px;
}
tr:nth-child(even){
background-color: #f2f2f2;
text-align: left;
padding: 10px;
}
tr:nth-child(odd){
text-align: left;
padding: 10px;
}
tr:hover {
background-color: #ddd;
}
tr:active{
background: #8d8d8d;
}
\ No newline at end of file
client/image/Screenshot_2023-09-27_222606-removebg-preview.png

17.5 KiB

File moved
client/image/headericon.png

31.5 KiB

client/image/logo.png

31.5 KiB

client/image/logoregis.png

54.4 KiB

This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment