Crie um aplicativo simples para iniciantes com Node.js Bootstrap e MongoDB
Node.js é um dos famosos ambientes de código aberto que permite executar scripts javascript fora do navegador. As pilhas MERN e MEAN são as duas combinações mais populares que ajudam você a criar um aplicativo incrível. Neste artigo, criaremos um aplicativo de formulário de contato simples e amigável para iniciantes com Node, Bootstrap e MongoDB. Antes de iniciar o projeto, temos que nos certificar de que Node.js e MongoDB estão instalados em seu sistema.
Estrutura do Projeto:
Etapa 1: Crie uma pasta de projeto e abra essa pasta em seu IDE.
Primeiro, para criar um arquivo package.json com os valores que você fornece, use o comando npm init no terminal do IDE.
npm init
Você pode personalizar as perguntas feitas e os campos criados durante o processo de inicialização ou deixá-lo como padrão. Após o processo, você encontrará o arquivo package.json na pasta do seu projeto.
Etapa 2: Em seguida, crie um arquivo index.js na pasta do projeto, que será o ponto de entrada do aplicativo.
Passo 3: Agora instalar as dependências expressar , mangusto , e nodemon usando o npm comando.
npm install express mongoose nodemon
Instalando express, mongoose e nodemon
Vai levar algum tempo para instalar as dependências e depois de pronto, uma pasta chamada node_modules será criado e no package.json arquivo sob dependências, você vai encontrar o nome de todas as dependências instaladas junto com sua versão.
Dependências
Passo 4: Vamos próxima abrir o index.js arquivo e criar um aplicativo expressa simples com o seguinte código.
// Importing express module
var express = require("express");
// Importing mongoose module
var mongoose = require("mongoose");
const port = 80;
const app = express();
// Handling the get request
app.get("/", (req, res) => {
res.send("Hello World");
});
// Starting the server on the 80 port
app.listen(port, () => {
console.log(`The application started
successfully on port ${port}`);
});Este código cria um aplicativo expresso simples que inicia um servidor e escuta na porta 80 para conexões. O aplicativo responde com “Hello World” para requests de “/” .
Etapa 5: para executar o código, vá para o terminal e digite
nodemon index.js
Aplicativo iniciado com sucesso
Etapa 6: Abra seu navegador, use http: // localhost ou simplesmente localhost para acessar o servidor a partir dele.
Localhost
A página mostra “Hello World” , o que significa que nosso aplicativo expresso está funcionando corretamente.
Etapa 7: agora precisamos adicionar 2 linhas de código, pois precisaremos de express.json() e express.urlencoded() para requests POST e PUT. O Express nos fornece middleware para lidar com objetos de dados de entrada no corpo da solicitação. Em ambas as requests POST e PUT, estamos enviando objetos de dados ao servidor e solicitando que o servidor aceite ou armazene esse objeto de dados, que está incluído no req.body dessa solicitação.
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
Etapa 8: Crie uma pasta chamada public dentro da pasta do projeto. Criaremos todos os arquivos HTML estáticos no diretório público do nosso projeto.
// For serving static html files
app.use(express.static('public'));
Etapa 9: Agora vamos nos conectar ao banco de dados mongoose usando o código a seguir. O nome do banco de dados para este projeto é fornecido como projectDG
mongoose.connect("mongodb://localhost/projectDG", {
useNewUrlParser: true,
useUnifiedTopology: true,
});
var db = mongoose.connection;
Passo 10: A seguir, vamos definir um método de postagem para salvar os dados do formulário de contato em nosso banco de dados. Definimos nosso objeto de dados e criamos uma coleção de usuários nomeados aqui. Após a inserção de dados bem-sucedida, iremos redirecionar para formSubmitted.html
Esta é a parte principal do arquivo index.js onde a solicitação de postagem será tratada e a transferência adequada dos dados será realizada da solicitação do cliente para o servidor de banco de dados principal.
app.post("/formFillUp", (req, res) => {
var name = req.body.name;
var reason = req.body.reason;
var email = req.body.email;
var phone = req.body.phone;
var city = req.body.city;
var state = req.body.state;
var addressline = req.body.addressline;
var data = {
name: name,
reason: reason,
email: email,
phone: phone,
city: city,
state: state,
addressline: addressline,
};
db.collection("users").insertOne(data,
(err, collection) => {
if (err) {
throw err;
}
console.log("Data inserted successfully!");
});
return res.redirect("formSubmitted.html");
});
O index.js final terá a seguinte aparência:
var express = require("express");
var mongoose = require("mongoose");
const port = 80;
const app = express();
mongoose.connect("mongodb://localhost/projectDG", {
useNewUrlParser: true,
useUnifiedTopology: true,
});
var db = mongoose.connection;
app.use(express.json());
// For serving static HTML files
app.use(express.static("public"));
app.use(express.urlencoded({ extended: true }));
app.get("/", (req, res) => {
res.set({
"Allow-access-Allow-Origin": "*",
});
// res.send("Hello World");
return res.redirect("index.html");
});
app.post("/formFillUp", (req, res) => {
var name = req.body.name;
var reason = req.body.reason;
var email = req.body.email;
var phone = req.body.phone;
var city = req.body.city;
var state = req.body.state;
var addressline = req.body.addressline;
var data = {
name: name,
reason: reason,
email: email,
phone: phone,
city: city,
state: state,
addressline: addressline,
};
db.collection("users").insertOne(
data, (err, collection) => {
if (err) {
throw err;
}
console.log("Data inserted successfully!");
});
return res.redirect("formSubmitted.html");
});
app.listen(port, () => {
console.log(`The application started
successfully on port ${port}`);
});Passo 11: Agora vamos criar index.html, formSubmittedhtml , e Style.css arquivos dentro do público pasta.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous" />
<link rel="stylesheet" href="./style.css" />
<link href=
"https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet" />
</head>
<body>
<div class="container mt-3">
<br />
<h1>Contact Us</h1>
<br />
<form action="/formFillUp" method="POST">
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputName"
style="font-size: 23px">
Name
</label>
<input type="text" class="form-control"
id="name" name="name" />
</div>
<div class="form-group col-md-6">
<label for="inputReason"
style="font-size: 23px">
Reason for contacting
</label>
<input type="text" class="form-control"
id="reason" name="reason" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail"
style="font-size: 23px">
Email
</label>
<input type="email" class="form-control"
id="inputEmail" name="email" />
</div>
<div class="form-group col-md-6">
<label for="inputPhone"
style="font-size: 23px">Phone
</label>
<input type="text" class="form-control"
id="inputPhone" name="phone" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity"
style="font-size: 23px">City
</label>
<input type="text" class="form-control"
id="inputCity" name="city" />
</div>
<div class="form-group col-md-6">
<label for="inputState"
style="font-size: 23px">State
</label>
<input type="text" class="form-control"
id="inputState" name="state" />
</div>
</div>
<div class="form-group">
<label for="inputAddress"
style="font-size: 23px">Address</label>
<input type="text" class="form-control"
id="inputAddress" name="addressline" />
</div>
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
</div>
</body>
</html>Saída:
index.html
formSubmitted.html
<!DOCTYPE html>
<html>
<head>
<title>Form Submitted Succesfully</title>
<link rel="stylesheet" href="./style.css" />
<link href=
"https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet" />
</head>
<body>
<div class="containerFormSubmittedMessage">
<h1>Form Submitted Succesfully!</h1>
<p>
Thank you for contacting us! Our
team will mail you shortly.
</p>
</div>
</body>
</html>Saída:
formSubmitted.html
style.css
body {
background-image: linear-gradient(120deg,
#9de7fa 0%, #f89fba 100%);
color: white;
font-family: "Poppins", sans-serif;
min-height: 100vh;
}
.btn-primary {
color: #fff;
background-color: #f89fba;
border-color: #f89fba;
}
.containerFormSubmittedMessage {
display: flex;
flex-direction: column;
margin: auto;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid whitesmoke;
}Etapa 12: Depois de criar esses três arquivos, estamos quase terminando nosso projeto. Vamos agora iniciar o MongoDB. Abra a janela do Windows Powershell e digite o comando mongod.
mongod
Digite o comando mongod na janela do PowerShell
Abra outra janela do Windows Powershell e digite o comando mongo
mongo
Digite o comando mongo em outra janela do PowerShell
Etapa 13: Abra seu IDE e, no terminal, digite nodemon index.js para iniciar o aplicativo. Vá para localhost .
Nota: Os dados inseridos com sucesso serão impressos após o tratamento correto da pós-solicitação.
- Preencha os dados do formulário de contato. Após o envio bem-sucedido do formulário, você será redirecionado para formSubmitted.html de index.html .
Formulário de Contato
- Agora, para verificar se nossos dados inseridos no formulário de contato foram salvos no banco de dados projectDG , usaremos os seguintes comandos na segunda janela do Windows Powershell.
Este comando lista todos os bancos de dados em mongoDB:
show dbs
Este comando nos permitirá mudar para nosso banco de dados:
use projectDG
Este comando vamos verificar um dado particular na coleção:
db.users.find()
Dados presentes na coleção de usuários no banco de dados projectDG
Podemos ver claramente que os dados foram inseridos no banco de dados MongoDB.
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva
