Hi all,
I am a beginner to PHP and I’ve just completed a course. I am working on a notes app and have got most of the ui functionality. I am able to click to the button and have a form modal pop up. When I submit the form, the data is send to the database. The data is also displayed on the sidebar as shown.
I want to be able to click on the notes on the sidebar and be able to view them in the body on the application but I can’t seem to wrap my head around the logic. Do I need to dynamically create pages? If so how do I go about it?
Here is my code so far
<?php
// Submit validation and insert into database
if(isset($_POST['submit'])){
$title = htmlspecialchars($_POST['title']);
$note = htmlspecialchars($_POST['note']);
$date = date("Y/m/d");
$connection = mysqli_connect('localhost', 'root', '', 'notesapp');
if(!$connection){
die("connection failed");
}
$query = "INSERT INTO note(note_title, note_content, note_date) ";
$query .= "VALUES ('$title', '$note', '$date')";
$result = mysqli_query($connection, $query);
if(!$result) {
die("Query Failed". mysqli_error($connection));
}
}
?>
<?php include 'read.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="style.css">
<title>Notes App</title>
</head>
<body>
<nav class="notes">
<?php
while($row = mysqli_fetch_assoc($result_query)) {
$note_title = $row['note_title'];
$note_date = $row['note_date'];
echo "<div class='note'>
<h5>${note_title}</h5>
<small>${note_date}</small>
</div>";
}
?>
</nav>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<i class="fas fa-2x fa-times"></i>
<form method="post" action="index.php">
<label for="add_title">Title</label>
<input type="text" id="title" name="title" placeholder="Add Title...">
<label for="add_note">Add Note</label>
<textarea name="note" id="note" cols="15" rows="10"></textarea>
<input type="submit" name="submit" value="Submit">
</form>
</div>
</div>
<div class="content">
<img src="./images/undraw_add_notes_8cfw.svg" alt="">
<button>Add note</button>
</div>
<script src="ui.js"></script>
<script src="app.js"></script>
<script src="https://kit.fontawesome.com/732aafddc7.js" crossorigin="anonymous"></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
display: flex;
}
.notes {
background: rgb(26, 25, 25);
width: 20%;
height: 100%;
color: #fff;
position: fixed;
bottom: 0;
overflow: auto;
z-index: -3;
}
.note {
display: flex;
justify-content: space-between;
border-bottom: 0.1px solid rgb(49, 48, 48);
padding-left: 1rem;
}
.note h5 {
padding: 1rem 0;
flex: 1;
}
.note small {
flex: 1;
text-align: end;
opacity: 0.4;
}
.note:hover {
background: red;
}
small {
margin-right: 0.5rem;
}
.content {
margin: 3rem auto;
position: fixed;
top: 10%;
left: 45%;
}
.content img {
width: 400px;
display: block;
}
button {
display: block;
margin: 2rem auto;
border: none;
background: #6C63FF;
color: #fff;
padding: 0.75rem 2rem;
border-radius: 5px;
outline: none;
box-shadow: 0px 10px 27px -5px rgba(117,106,106,1);
cursor: pointer;
}
button:active {
box-shadow: 0px 10px 27px -5px rgba(117,106,106,1);
transform: translateY(4px);
}
input[type=text] {
width: 100%;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 1.5rem;
}
input[type=submit] {
width: 100%;
background-color:#6C63FF;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
textarea {
width: 100%;
border-radius: 4px;
border: 1px solid #ccc;
margin: 8px 0;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background: #fff;
width: 50%;
padding: 2rem;
border-radius: 5px;
margin: 2rem auto;
}
.fas {
position: relative;
top: -20px;
float: right;
cursor: pointer;
transition: 0.3s ease-out;
}
.fas:hover {
color: #6C63FF;
}
document.querySelector('button').addEventListener('click', displayForm);
document.querySelector('.fas').addEventListener('click', removeForm);
// document.querySelector('form').addEventListener('submit', addNote);
const form = document.querySelector('#myModal');
function displayForm(e){
e.preventDefault();
form.style.display = 'block';
}
function removeForm(){
form.style.display = 'none';
}
// function addNote(e){
// e.preventDefault();
// let title = document.getElementById('title');
// let note = document.getElementById('note');
// let notes = document.querySelector('.notes');
// const div = document.createElement('div');
// div.classList.add('note');
// const header_title = document.createElement('h1');
// header_title.innerHTML = title.value;
// div.appendChild(header_title);
// notes.appendChild(div);
// title.value = '';
// note.value = '';
// }
// Close modal when body is clicked
window.onclick = function(event) {
if (event.target == form) {
form.style.display = "none";
}
}
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}