The goal of my project is to make a phonebook and connect it to the database. Since I learned by myself, videos on youtube are insufficient, I do not know how to transfer the data. I want to use MongoDB as database, how can I do this or where can I learn it? Waiting for your recommendations.
this db.json
{
"people": [
{
"id": 1,
"firstname": "Hasan Mert",
"lastname": "Acar",
"phone": "545424154545",
"mail": "Acar@gmail.com"
},
{
"id": 2,
"firstname": "kadir",
"lastname": "karakollukcu",
"phone": "+0485126545",
"mail": "hameac@gmail.com"
}
]
}
this app.js
const { MongoClient } = require('mongodb');
// or as an es module:
// import { MongoClient } from 'mongodb'
// Connection URL
const url = 'mongodb+srv://kadir:asd123@cluster0.ww8jt.mongodb.net/myFirstDatabase?retryWrites=true&w=majority';
const client = new MongoClient(url);
// Database Name
const dbName = 'rehber';
async function main() {
// Use connect method to connect to the server
await client.connect();
console.log('Connected successfully to server');
const db = client.db(dbName);
const collection = db.collection('documents');
// the following code examples can be pasted here...
return 'done.';
}
main()
.then(console.log)
.catch(console.error)
.finally(() => client.close());
this index.html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Telefon Rehberi</title>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 6px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 6px 3px;
transition-duration: 0.4s;
cursor: pointer;
}
.button5 {
background-color: black;
color: whitesmoke;
border: 3px solid #555555;
}
.button5:hover {
background-color: #555555;
color: black;
}
.button4 {
background-color: rgb(252, 255, 57);
color: rgb(0, 0, 0);
border: 3px solid rgb(252, 255, 57);
}
.button4:hover {
background-color: #ffffff;
color: black;
}
</style>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js">//buttondaki şekiller sil düzenle</script>
<h1 style="text-align:center">My PhoneBook</h1>
</head>
<body>
<div class="container">
<div class="row mt-5 shadow-sm rounded">
<div class="col-12 col-sm-4 p-3">
<form action="">
<input type="hidden" name="id">
<div class="form-group">
<label for="firstname">Name </label>
<input type="text" name="firstname" id="firstname" class="form-control"
placeholder="Please! Enter the name">
</div>
<div class="form-group">
<label for="lastname">Surname </label>
<input type="text" name="lastname" id="lastname" class="form-control"
placeholder="Please! Enter the surname">
</div>
<div class="form-group">
<label for="phone">Phone-Number </label>
<input type="text" name="phone" id="phone" class="form-control"
placeholder="Please! Enter the phone number">
</div>
<div class="form-group">
<label for="mail">Mail </label>
<input type="text" name="mail" id="mail" class="form-control"
placeholder="Please! Enter the mail">
</div>
<div class="form-group">
<p></p>
<button id="update" type="button" class="button button4 float-end">Update</button>
<button id="save" type="button" class="button button5">Save</button>
</div>
</form>
</div>
<div class="col">
<table class="table table-hover">
<thead>
<tr>
<th class="d-none">id</th>
<th>FirstName</th>
<th>LastName</th>
<th>Number</th>
<th>Mail</th>
<th> </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<script src=app.js></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="/js/bootstrap.bundle.js"></script>
<script>
$(function(){
function Template(e){
const template = `
<tr>
<td class="d-none">${e.id}</td>
<td>${e.firstname}</td>
<td>${e.lastname}</td>
<td>${e.phone}</td>
<td class="d-none d-sm-table-cell">${e.mail}</td>
<td>
<button style="margin-right: 30px;" class="btn shadow-sm btn-sm text-warning edit" data-id="${e.id}"> <i class="fas fa-pencil-alt"></i></button>
<button class="btn shadow-sm btn-sm text-danger delete" data-id="${e.id}"> <i class="fas fa-trash "></i></button>
</td>
</tr> `;
return template;
}
const _url = 'mongodb+srv://kadir:asd123@cluster0.ww8jt.mongodb.net/myFirstDatabase?retryWrites=true&w=majority'
function ShowConfirm() {
var confirmation = confirm("Are you sure?");
if (confirmation) {
alert("Person was deleted.");
}
return confirmation;
};
function Load(){
$.getJSON(_url,function(data){
var items= [];
data.map((x)=> items.push(Template(x)) ); // nasıl yapıyor
$("table tbody").html(items.join() );
});
}
Load();
$("#save").click(function ( ) {
$.ajax({
url: _url,
type: "post",
dataType: "json",
data: $("form").serialize(),
success: function (response) {
Load();
$("form")[0].reset();
},
error: function (err) { }
})
})
$(document).on("click",".delete",function () {
if(ShowConfirm()){
const id =$(this).data("id");
$.ajax({
url:` ${_url}${id}`,
type: "delete",
dataType: "json",
success: function (response) {
Load();
$("form")[0].reset();
},
error: function (err) {
}
})
}})
$(document).on("click",".edit",function () {
const id =$(this).data("id");
$.ajax({
url:`${_url}${id}`,
type: "get",
dataType: "json",
success: function (response) {
for(var p in response){
$(`input[name='${p}']`).val(response[p]);
}
},
error: function (err) { }
})
})
$("#update").click(function ( ) {
const id =$(`input[name='id']`).val();
$.ajax({
url: `${_url}${id}`,
type: "put",
dataType: "json",
data: $("form").serialize(),
success: function (response) {
Load();
$("form")[0].reset();
},
error: function (err) { }
})
})
})
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire