I am new to MongoDB, and I am trying to make a blog project using MongoDB and Node.js. I am having a problem as my data cannot be stored in MongoDB. I use the body-parser method to get the data, but the data is not stored in MongoDB. A little help would be nice, thank you.
const express=require('express')
const path=require('path')
const mongoose = require('mongoose');
const BlogPost = require('./models/BlogPost.js')
mongoose.connect('mongodb://localhost/my_database',{useNewUrlParser:true})
const app=new express()
const ejs=require('ejs')
app.set('view engine','ejs')
const bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:true}))
app.use(express.static('public'))
app.listen(4000,()=>{
console.log('App listening on port 4000')
})
app.get('/',(req,res)=>{
res.render('index')
})
app.get('/about',(req,res)=>{
//res.sendFile(path.resolve(__dirname,'pages/about.ejs')
res.render('about')
})
app.get('/contact',(req,res)=>{
// res.sendFile(path.resolve(__dirname,'pages/contact.ejs'))
res.render('contact')
})
app.get('/post',(req,res)=>{
//res.sendFile(path.resolve(__dirname,'pages/post.ejs'))
res.render('post')
})
app.get('/posts/new',(req,res)=>{
res.render('create')
})
app.post('/posts/store',(req,res)=>{
BlogPost.create(req.body,(error,blogpost)=>{
res.redirect('/')
})
})
This is my code in create.ejs
<!DOCTYPE html>
<html lang="en">
<%- include('layouts/header'); %>
<body>
<!-- Navigation-->
<%- include('layouts/navbar'); -%>
<!-- Page Header-->
<header class="masthead" style="background-image: url('/assets/img/contact-bg.jpg')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="page-heading">
<h1>Create New Post</h1>
<span class="subheading">Have questions? I have answers.</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content-->
<main class="mb-4">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<form action="/posts/store" method="POST"></form>
<p>Want to get in touch? Fill out the form below to send me a message and I will get back to you as soon as possible!</p>
<div class="my-5">
<!-- * * * * * * * * * * * * * * *-->
<!-- * * SB Forms Contact Form * *-->
<!-- * * * * * * * * * * * * * * *-->
<!-- This form is pre-integrated with SB Forms.-->
<!-- To make this form functional, sign up at-->
<!-- https://startbootstrap.com/solution/contact-forms-->
<!-- to get an API token!-->
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
<div class="form-floating">
<input class="form-control" id="title" placeholder="title" type="text" name="title" />
<label for="title">title</label>
</div>
<div class="form-floating">
<textarea class="form-control" id="body" placeholder="body" name="body"></textarea>
<label for="body">body</label>
</div>
<br />
<!-- Submit success message-->
<!---->
<!-- This is what your users will see when the form-->
<!-- has successfully submitted-->
<div class="d-none" id="submitSuccessMessage">
<div class="text-center mb-3">
<div class="fw-bolder">Form submission successful!</div>
To activate this form, sign up at
<br />
https://startbootstrap.com/solution/contact-forms
</div>
</div>
<!-- Submit error message-->
<!---->
<!-- This is what your users will see when there is-->
<!-- an error submitting the form-->
<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
<!-- Submit Button-->
<button class="btn btn-primary text-uppercase " id="submitButton" type="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
</main>
<%- include('layouts/footer'); -%>
<%- include('layouts/scripts'); -%>
</body>
</html>
Related
I am a student & i am working on practicing an app for a blog post. Downloaded "clean-blog" template on startbootstrap website.
Link attached:https://startbootstrap.com/theme/clean-blog
Now using Node & EJS trying to work on form submission. But the form is not getting passed through. There was a comment snippet which said: activation token needed
I am not even getting a change in mouse pointer to 'click-finger' when my mouse is near the submit button. I am a student & just using this for learning purpose. Tried removing all unwanted attributes, but still the the form is not getting activated. Now I have undone the changes I did to the page. Below is the code for my ejs file.
Can anyone help me activate the "form" just for demo purpose? What all should I remove for this to happen?
'''
<!DOCTYPE html>
<html lang="en">
<!-- Header-->
<%- include('layouts/header'); -%>
<body>
<!-- Navigation-->
<%- include('layouts/navbar'); -%>
<!-- Page Header-->
<header class="masthead" style="background-image: url('/assets/img/contact-bg.jpg')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="page-heading">
<h1>Create New Post</h1>
<span class="subheading">Have questions? I have answers.</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content-->
<main class="mb-4">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<p>Want to get in touch? Fill out the form below to send me a message and I will get back to
you as soon as possible!</p>
<div class="my-5">
<!-- * * * * * * * * * * * * * * *-->
<!-- * * SB Forms Contact Form * *-->
<!-- * * * * * * * * * * * * * * *-->
<!-- This form is pre-integrated with SB Forms.-->
<!-- To make this form functional, sign up at-->
<!-- https://startbootstrap.com/solution/contact-forms-->
<!-- to get an API token!-->
<form action="/posts/store" method="POST" data-sb-form-api-token="API_TOKEN">
<div class="form-floating">
<input class="form-control" id="title" name="title" type="text"
placeholder="Enter the title..." data-sb-validations="required" />
<label for="title">Title</label>
<div class="invalid-feedback" data-sb-feedback="name:required">Title is
required.</div>
</div>
<div class="form-floating">
<textarea class="form-control" id="description" style="height: 12rem"
placeholder="Enter your message here..." style="height: 12rem"
data-sb-validations="required"></textarea>
<label for="message">Description</label>
<div class="invalid-feedback" data-sb-feedback="message:required">A Description is
required.</div>
</div>
<br />
<!-- Submit success message-->
<!---->
<!-- This is what your users will see when the form-->
<!-- has successfully submitted-->
<div class="d-none" id="submitSuccessMessage">
<div class="text-center mb-3">
<div class="fw-bolder">Form submission successful!</div>
To activate this form, sign up at
<br />
https://startbootstrap.com/solution/contact-forms
</div>
</div>
<!-- Submit error message-->
<!---->
<!-- This is what your users will see when there is-->
<!-- an error submitting the form-->
<div class="d-none" id="submitErrorMessage">
<div class="text-center text-danger mb-3">Error sending message!</div>
</div>
<!-- Submit Button-->
<button class="btn btn-primary text-uppercase disabled" id="submitButton"
type="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
</main>
<!-- Footer-->
<%- include('layouts/footer'); -%>
<!-- Scripts-->
<%- include('layouts/scripts'); -%>
</body>
</html>
'''
Personally I just removed the class 'disabled' on the submit button like the example below and it worked:
error:
<button class="btn btn-primary text-uppercase disabled" id="submitButton" type="submit">Send</button>
right answer:
<button class="btn btn-primary text-uppercase" id="submitButton" type="submit">Send</button>
I just removed the css attribute for the button tag & it started working...! Now my form is working absolutely fine.!
<button class="btn btn-primary text-uppercase disabled" id="submitButton" type="submit">Send</button>
i have a form where i input restaurant details
#extends('layouts.app')
#section('content')
<html>
<head>
</head>
<body>
<h3 class="text-center"><u>Create Restaurant</u></h3>
<div class="container">
{!! Form::open(['action' => 'RestaurantsController#store','method'=>'POST','enctype'=>'multipart/form-data'])!!}
<div class="form-group">
{{Form::label('name','Name')}}
{{Form::text('name','',['class'=>'form-control','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('opening_time','Opening time')}}
{{Form::time('opening time','',['class'=>'form-control','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('closing_time','Closing time')}}
{{Form::time('closing time','',['class'=>'form-control','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('days_of_operation','Days of operation')}}
{{Form::text('days_of_operation','',['class'=>'form-control','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('website','Website')}}
{{Form::text('website','',['class'=>'form-control','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('email','Email')}}
{{Form::text('email',null,['class'=>'form-control','id'=>'menu','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('phone','Phone')}}
{{Form::text('phone',null,['class'=>'form-control','id'=>'phone','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('pysical_address','Physical address')}}
{{Form::textarea('physical_address','',['class'=>'form-control','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('lat','Latitude')}}
{{Form::number('lat',null,['class'=>'form-control','id'=>'lat','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('lon','Longitude')}}
{{Form::number('lon',null,['class'=>'form-control','id'=>'lon','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::file('cover_image')}}
</div>
{{-- {{Form::hidden('_method','POST')}} --}}
{{Form::submit('submit',['class'=>'btn btn-primary','type'=>'submit','id'=>'submit'])}}
{!! Form::close() !!}
</div>
</body>
</html>
#endsection
i need to save lattitude,longitude,restaurant id in coordinates table
i need to save the following details in restaurants table
$restaurant=new Restaurant;
$restaurant->name= $request->input('name');
$restaurant->opening_time=$request->input('opening_time');
$restaurant->physical_address=$request->input('physical_address');
$restaurant->closing_time=$request->input('closing_time');
$restaurant->days_of_operation=$request->input('days_of_operation');
$restaurant->website=$request->input('website');
$restaurant->email=$request->input('email');
$restaurant->phone=$request->input('phone');
$restaurant->cover_image=$fileNameToStore;
$restaurant->save();
how do i go about it?
How do i query restaurants that are near a user's location? I know how to get the current users longitude and lattitude and then?
I'm making an app that needs to be accessible for users without an account but as soon as someone makes an account they need to be able to see additional functionality and it needs to be responsive as well.
For responsiveness I'm using material design for bootstrap and angular materialmdbootstrap. In the example bellow I'd want to change the mdb-col-size from 9 to 12 depending on if the user is logged in or not and thus not display save,... option(s).
<div>
<div class="row ">
<div class="col-lg-9 col-md-8 col-sm-6 ">
<div class="row ">
<div class="col-md-12 mb-12">
<div class="card testimonial-card ">
<div class="card-up lighten-1 ">
<div class="card-body">
<h4 class="card-title">{{ dare.title }}</h4>
<hr />
<p>{{ dare.description }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6"><!--this shouldn't be displayed when someone is not logged in-->
<div class="row">
<div class="col-12">
<button mat-raised-button class="btn btn-block">
Save
</button>
</div>
</div>
<br />
<div class="row">
<div class="col-12">
<button mat-raised-button class="btn btn-block">
Challenge someone else
</button>
</div>
</div>
<br />
<div class="row">
<div class="col-12">
<button mat-raised-button class="btn btn-block">
Create new ...
</button>
</div>
</div>
</div>
</div>
<br />
</div>
I expect to see the options only when someone is logged in and the responsiveness changing accordingly.
Thanks you in advance!
You should rather use Guards in your project, example in documentation: https://angular.io/api/router/CanActivate
To achieve it you should implement two components (one for authenticated user, another for non-authenticated user). Define routing, for example:
{
path: '',
component: AuthenticatedUserComponent,
canActivate: [AuthenticatedUserGuard]
},
{
path: '',
component: UnauthenticatedUserComponent
}
And then define guard:
#Injectable()
class AuthenticatedUserGuard implements CanActivate {
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {
return true; // here you should call a method from service, that
// that holds whether user is authenticated or not
}
}
I am trying to implement Single Page Application in AngularJs. However, when I select the link ({{item.Name}} in Tree.Html). Corresponding view is not displayed in ng-View.
Any help will be appreciated
Main.html
<body ng-app="InfoModule" ng-controller="MainController" style="max-width:1000px; margin:auto">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Information</a>
</div>
<span class="pull-right navbar-text">{{UserName}}</span>
</div>
</nav>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
Info Page
<div ui-tree data-drag-enabled="false">
<ol ui-tree-nodes ng-model="itemList" class="font-weight-normal">
<li ng-repeat="item in itemList track by $index" ui-tree-node ng-include="'Tree.html'">
</li>
</ol>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div ng-include="Details"></div>
<div data-ng-view>
</div>
</div>
</div>
<div class="panel-footer">
(C) My Solutions
</div>
Tree.html
<div ui-tree-handle class="tree-node tree-node-content">
<a class="btn btn-success btn-xs" ng-if="item.nodes && item.nodes.length > 0" ng-click="toggle(this)">
<span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>
</a>
<a href="#Details" >
{{item.Name}}
</a>
Master.js
var app = angular.module('InfoModule', ['ui.tree', 'ngRoute', 'ngStorage']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/login', {
templateURL: 'Login.html',
controller: '/mYscriptS/LoginController.js'
})
.when('Details', {
templateURL: 'pages/Details.html',
controller: '../mYscriptS/DetailsController.js'
})
.when('/Main', {
templateURL: 'main.html',
controller: '/mYscriptS/MainController.js'
});
//.otherwise({
// redirectTo: 'pages/Main.html'
// //templateURL: '/Main.html',
// //controller: '/mYscriptS/MainController.js'
//});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$locationProvider.html5Mode(true);
}]);
Details.html
<div ng-controller="DetailsController" >
<div class="row">
<div class="col-md-6">
User Id
{{UserName}}
</div>
<div class="col-md-6">
<input type="text" name="txtUserId" />
</div>
</div>
<div class="row">
<div class="col-md-6">
Password
</div>
<div class="col-md-6">
<input type="text" name="txtPassword" />
</div>
</div>
Once I had gotten a problem that was same as yours.
I've tried to figure it out, and many people recommended using 'ui.router' instead of 'ngRoute'.
Maybe there are more differences between them specifically.
But even just this explain, could help you deciding side.
ngRoute is a angular core module which is good for basic scenarios. I believe that they will add more powerful features in upcoming releases.
Ui-router is a contributed module which is overcome the problems of ngRoute. Mainly Nested/Complex views.
URL: https://github.com/angular-ui/ui-router
For some this will be quite easy, I have the following web page which is exactly what I'm looking for, which aligns in the middle of the page
But when I minimize this down to see how it renders when on a mobile screen it looks like this
How on earth is someone going to write an email address in that? can someone tell me what I'm doing wrong, this is my HTML
<div class="row">
<div class="container">
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { #class = "form-inline" }))
{
<div class="row">
<div class="col-xs-12 text-center">
<p class="text-center">
<strong>Enter your email and get special information:</strong>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6">
<div class="input-group input-group">
#Html.TextBoxFor(m => m.EmailAddress, new { #class = "form-control", placeholder = "Email address" })
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">Submit</button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-xs-12 -->
<div class="col-xs-3"></div>
</div><!-- /.row -->
}
</div>
Use more than just the XS (extra-small screens) grid when specifying columns
Don't waste space on blank columns on XS screens.
Try something like:
<div class="row">
<div class="hidden-xs col-sm-3"></div>
<div class="col-xs-12 col-sm-6">
<div class="input-group input-group">
#Html.TextBoxFor(m => m.EmailAddress, new { #class = "form-control", placeholder = "Email address" })
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">Submit</button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /col -->
<div class="hidden-xs col-sm-3"></div>
</div><!-- /.row -->
Bumped the input-group up to a full row on XS screens
Only started making the input-group narrower on SM (small) screens