Laravel - data stored in a variable but becomes null in database - laravel

I have a problem with my function that saves data into database,
Basically user puts name into a form and when I do console.log I do get that value, I then call my function in controller and everything looks sucessfully - no errors but when I check in mysql name = NULL, why?
My form:
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Website Name
</h4>
</div>
<div class="modal-body">
<form action="{{ action('BuilderController#postDB') }}"
class="form-horizontal" role="form" method = "POST">
<div class="form-group">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" id="code" name="newCode" value="">
<label class="col-sm-2 control-label"
for="website_name">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control"
id="website_name" placeholder="Website Name"/>
</div>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="form-control margin btn btn-danger"
data-dismiss="modal">
Close
</button>
<button onClick=" updateDatabase(this);" type="submit" class="form-control margin btn btn-success" id="getRequest changes">
Save Website
</button>
</div>
</div>
</div></form>
</div>
JS:
var web_name;
function updateDatabase()
{
code2 = document.getElementById("content-link2").innerHTML;
var newCode = document.getElementById('code').value = code2;
web_name = ($('#website_name').val());
console.log(web_name);
console.log(newCode);
Controller:
public function postDB(Request $request) {
$newName = $request->input('web_name');
$newLat = $request->input('newCode');
$websites = new Website();
$websites->name = $newName;
$websites->html = $newLat;
$websites->save();
// Now we go to our other function
return $this->website($newName);
}
public function website($newName)
{
// Return our "website" object
$html = Website::where('name', $newName)->first();
// Pass the contents of the "html" property to the view
return view('layouts/website', [
'html' => $html->html
]);
}

You need to add name attribute to input element:
<input name="website_name" ...

Related

How to retrieve uploaded file edit view blade using Laravel

I have a project in Laravel-5.8 for upload of files like excel and images.
I have successfully inserted it. I saved the file name in the table and the file itself in a directly. Where I have a problem is how to retrieve the file in the edit view blade.
Controller
public function update_employee_mid_year_comment(UpdateSelfReviewRequest $request, $id) {
$goal = Goal::find($id);
$goal->employee_mid_year_comment = $request->employee_mid_year_comment;
if ($request->employee_mid_year_attachment != "") {
$employee_mid_year_attachment = $request->file('employee_mid_year_attachment');
$new_name = rand() . '.' . $employee_mid_year_attachment->getClientOriginalExtension();
$employee_mid_year_attachment->move(public_path('storage/documents/mid_year'), $new_name);
$goal->employee_mid_year_attachment = $new_name;
}
$goal->save();
DB::commit();
Session::flash('success', 'Comment is Successfully Updated');
return redirect()->back();
}
I am using a modal form:
edit.blade
<div class="modal fade" id="edit{{ $goal->id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form action="{{route('mid_year_setups.update_employee_mid_year_comment',['id'=>$goal->id])}}" method="post" enctype="multipart/form-data" id="edit_comment-form">
{{ csrf_field() }}
<div class="modal-header">
Update Self-Review Comment
</div>
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Comment:<span style="color:red;">*</span></label>
<textarea rows="2" name="employee_mid_year_comment" class="form-control" placeholder="Enter Comment here" value="{{old('employee_mid_year_comment',$goal->employee_mid_year_comment)}})}}" required data-validation-required-message="This field is required">{{old('employee_mid_year_comment',$goal->employee_mid_year_comment)}}</textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="control-label"> Attachment:</label>
<div class="custom-file">
<div class="custom-file">
<input value="{{old('employee_mid_year_attachment',$goal->employee_mid_year_attachment)}}" type="file" name="employee_mid_year_attachment" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="exampleInputFile">Choose file</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="edit_comment_btn-submit" class="btn btn-success btn-ok">Save</button>
</div>
</form>
</div>
</div>
</div>
The file name is employee_mid_year_attachment while the file path is: storage/documents/mid_year
When I rendered the edit view blade, it didn't retrieve the attached document. How do I achieve this?
Thanks
use in value input path to file
<input
value="{{asset('storage/documents/mid_year/'.$goal>employee_mid_year_attachment')}}"
type="file" name="employee_mid_year_attachment" class="custom-file-input"
id="customFile">

how to import excel file in mysql using laravel 5.7 with vue JS

i was creating vue file for inpute Excel or csv file laravel 5.7
i was using Maatwebsite/Laravel-Excel
dont know how to route there things it if my first time to make app like laravel with vue JS
Don't know what to doo
there is Vue file
<template>
<div class="container">
<div class="row mt-5">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Students</h3>
<div class="card-tools">
<button class="btn btn-success" data-toggle="modal" data-target="#exampleModal">Add New <i class="fas fa-user-plus"></i></button>
<button class="btn btn-primary" data-toggle="modal" data-target="#importModel">Import <i class="fas fa-file-excel"></i></button>
<button class="btn btn-warning" data-toggle="modal" data-target="#export">Export <i class="fas fa-file-excel"></i></button>
</div>
</div>
</div>
<!-- /.card -->
</div>
</div><!-- /.row -->
<!-- Modal -->
<div class="modal fade" id="importModel" tabindex="-1" role="dialog" aria-labelledby="importModelLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="importModelLabel">Import Excel</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" enctype="multipart/form-data">
<div class="modal-body">
<div class="form-group">
<label>Import</label>
<input type="file" name="excel_file"
class="form-control" :class="{ 'is-invalid': form.errors.has('excel_file') }">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save Student</button>
</div>
</form>
</div>
</div>
</div>
<!--Exit Modal-->
</div>
</template>
<script>
export default {
data(){
return{
form: new Form({
first_name:'',
last_name:'',
email:'',
password:'',
designation:''
})
}
},
mounted() {
console.log('Component mounted.')
}
}
</script>
set a post route to import data in web.php file
that will route the things as pr laravelExcel
Route::post('importExcel', 'API/StudentMasterController#import');
in a controller file
public function import()
{
Excel::import(new StudentImport, request()->file('excel_file'));
//return redirect('/')->with('success', 'All good!');
}
and in a APP/import/studentmaster.php file
public function model(array $row)
{
return new Student_master([
'EnrollmentNo' => $row[22],
]);
}
this is vue views and js my code :
<form method="POST" action="#" class="form-horizontal" #submit.prevent="createUpload" enctype="multipart/form-data">
<div class="box-body">
<div class="form-group row"><label for="name" class="col-sm-2 form-control-label">Parameter</label>
<div class="col-sm-10">
<input type="file" class="form-control" id="result_file" ref="myFiles" placeholder="Name Parameter" required="required" #change="previewFiles($event)">
<input type="hidden" name="result_file2" class="form-control" id="title" v-model="datafileupload.result_file3" placeholder="Name Parameter" required="required">
<input type="hidden" name="hasilcek" class="form-control" id="hasilcek" v-model="datafileupload.hasilcek3" placeholder="Name Parameter" required="required">
<input type="hidden" class="form-control" v-model="datapush.filename">
<input type="hidden" class="form-control" v-model="datapush.size">
</div><br><br><br>
<div v-if="this.hasilcekexcel > 0" class="alert alert-warning">File {{ namafile }} exists , do you want to replace it ?</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" #click="doSomethingOnHidden" >Close</button>
<input type="submit" class="btn btn-primary" id="submit_upload2" v-if="this.hasilcekexcel > 0" value="Replace">
<input type="submit" class="btn btn-primary" id="submit_upload" v-if="this.hasilcekexcel == 0" value="Upload">
</div>
</form>
js upload :
createUpload () {
var data = new FormData();
var file = this.$refs.myFiles.files[0];
var size = this.$refs.myFiles.files[0].size;
data.append('filenya', file);
data.append('namasifile', this.datafileupload.result_file3);
data.append('angkacek', this.datafileupload.hasilcek3);
axios.post('excelupload/upload', data)
.then(response => {
this.pesertas.push(response.data.data);
this.showModal =false;
});
},
controller :
$excelupload = new Exceluploads;
$hasilcek = $request->angkacek;
$requestfile = $request->namasifile;
if ($request->filenya != '') {
$input = Input::all();
$size = $request->file('filenya')->getClientSize();
$file = array_get($input,'result_file');
$userID = Auth::user()->id;
$uploaded_by = Auth::user()->name;
$destinationPath = 'excel';
// GET THE FILE EXTENSION
$extension = 'xls';
$fileName = $requestfile.'.'.$extension;
if ($hasilcek > 0) {
File::delete($destinationPath.'/'.$fileName);
$upload_success = $request->filenya->move($destinationPath, $fileName);
return response()->json(['data' => Exceluploads::find($excelupload->id)]);
}else if ($hasilcek == 0) {
$upload_success = $request->filenya->move($destinationPath, $fileName);
$excelupload->filename = $fileName;
$excelupload->directory = $destinationPath.'/'.$fileName;
$excelupload->size = $size;
//1 = not custome
$excelupload->type = 1;
$excelupload->uploaded_by = $uploaded_by;
$excelupload->save();
return response()->json(['data' => Exceluploads::find($excelupload->id)]);
}
}

bootstrap 4 modal not showing after button is clicked with VueJs

I just learned vuejs with bootstrap 4 and I tried to display modal provided that when the create button was not clicked then the HTML modal tag is not displayed in the inspect element, and after the create button click bootstrap modal displayed. When the button create first time click HTML modal tag display on inspect element but bootstrap modal cannot be displayed on the browser page and the second time the bootstrap modal can be displayed. Here is the source code that I made with Laravel, can you help me on this issue, thank you.
User.vue
HTML
<template>
<div class="container">
<div class="row">
<div class="col-sm">
<div class="card-deck mb-3">
<div class="card mb-4 box-shadow">
<div class="card-header bg-success text-white">
<h4 class="my-0 font-weight-bold">
<!-- Button create user -->
<button #click="initAddUser()" class="btn btn-danger btn-sm"><i class="fa fa-plus"></i> Create New User</button>
<span class="float-right">User</span>
</h4>
</div>
<div class="card-body">
<!-- Bootstrap modal -->
<div v-if="showModal" class="modal fade" id="add_user_model" tabindex="-1" role="dialog" aria-labelledby="add_user_model_label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-info text-white">
<h5 class="modal-title" id="add_user_model_label"><i class="fa fa-plus"></i> Add New User</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<!-- Message errors create user -->
<div class="alert alert-danger" v-if="errors.length > 0">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<h5>{{ messages }}</h5>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</div>
<div class="form-group">
<label class="font-weight-bold" for="name">Name :</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name" v-model="user.name">
</div>
<div class="form-group">
<label class="font-weight-bold" for="name">Email :</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" v-model="user.email">
</div>
<div class="form-group">
<label class="font-weight-bold" for="password">Password:</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password" v-model="user.password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-sm btn-primary" #click="createUser()">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
Js
<script>
export default {
data() {
return {
user: {
name: '',
email: '',
password: ''
},
errors: [],
users: [],
showModal: false,
}
},
mounted() {
this.readUsers();
},
methods: {
initAddUser() {
this.errors = [];
$("#add_user_model").modal("show");
this.showModal = true;
},
reset() {
this.user.name = '';
this.user.email = '';
this.user.password = '';
},
readUsers() {
axios.get('/user/show')
.then(response => {
this.users = response.data.users;
});
},
createUser() {
axios.post('/user', {
name: this.user.name,
email: this.user.email,
password: this.user.password,
})
.then(response => {
this.reset();
this.users.push(response.data.user);
this.readUsers();
$("#add_user_model").modal("hide");
})
.catch(error => {
this.errors = [];
this.messages = error.response.data.message;
if (error.response.data.errors.name) {
this.errors.push(error.response.data.errors.name[0]);
}
if (error.response.data.errors.email) {
this.errors.push(error.response.data.errors.email[0]);
}
if (error.response.data.errors.password) {
this.errors.push(error.response.data.errors.password[0]);
}
});
}
}
}
</script>
Result images inspect element
This image button first time click https://ibb.co/jKENbU
This image button second time click https://ibb.co/nRy4qp

Cannot retrieve posted data from vue.js ajax call

I'm giving a try to Vue.js, It's much simpler than Angular and then I stuck on this problem. I'm using CodeIgniter for the backend process. Basically I just want to send data using ajax call via Vue.js then I want to retrieve the data in mmy controller. But I can't retrive the data using $this->input->post().
Here is my view. I'm using form on a modal.
<div class="modal fade modal-primary" id="modalObat" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Tambah Obat</h4>
</div>
<form #submit.prevent="onSubmit" class="form-horizontal">
<div class="modal-body">
<div class="form-group">
<label for="nama-obat" class="col-sm-2 control-label">Nama Obat</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="namaObat" placeholder="nama obat" v-model="newObat.nama">
</div>
</div>
<div class="form-group">
<label for="harga" class="col-sm-2 control-label">Harga</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="harga" placeholder="harga" v-model="newObat.harga">
</div>
</div>
<div class="form-group">
<label for="Stok" class="col-sm-2 control-label">Stok</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="stok" placeholder="jumlah" v-model="newObat.stok">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
<button type="submit" id="simpen" class="btn btn-outline">Save Changes</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
This is how I send the data on vue
Then here is my controller
public function tambahObat()
{
$data = array(
'nama' => $this->input->post('nama'),
'harga' => $this->input->post('harga'),
'stok' => $this->input->post('stok')
);
$data1 = $this->input->post('newObat');
$query = $this->obat_m->save($data, null);
if( $query == true )
{
$message = $this->session->set_flashdata('message', 'berhasil menyimpan');
}
else
{
$message = $this->session->set_flashdata('message', 'berhasil mengupdate');
}
redirect('obat');
}
I succeed to send the data as I check on the console
I think there is a problem with the controller but I dont know why. Could you help me, please??
You are trying to access this from inside the post callback, where this refers to something other than your vue instance. Try this format:
this.$http.post('url/to/post',{},function(){
//because of "bind", 'this' is vue
}.bind(this));

how to show popup using ajax output

i want to show a popup message about to login the user. here iam using ajax function.
if the success: part is true i want to show the popup message. pls help me thanks in adv.
<button data-toggle="modal" data-target="#squarespaceModal" class="btn green btn-success" onclick="going('<?echo $user_id;?>','<?echo $event_id;?>')">Going</button>
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">My Modal</h3>
</div>
<div class="modal-body">
<!-- content goes here -->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
function going()
function going(user_id,event_id)
{
$.ajax({
url: "<?echo base_url()?>events/event_going",
type: 'post', // HTTP METHOD
data:
{user_id:user_id,event_id:event_id },
success: function(data)
{
if(data='true')
{
//pls check & add any suggsns
$('#squarespaceModal').dialog(data);
}
// document.getElementById('mysubmit').value="active";
}
});
}
controller
public function event_going()
{
$user_id=$this->input->post('user_id');
$event_id=$this->input->post('event_id');
$temp=$this->session->userdata('user');
$going=$this->EM->is_going($event_id,$user_id);
$going1=$this->EM->is_going1($event_id,$user_id);
if($temp=="")
{
echo "Please log in";
}
else if($going==$user_id)
{
echo "Already confirmed as going..";
}
else if($going1==$user_id)
{
echo "Are you sure you want to change... Press ok to continue";
$this->EM->event_updation($event_id,$user_id);
}
else
{
$data=array('event_id'=>$event_id,'ev_going'=>$user_id);
$this->EM->eventgoing($data);
}
}
What you can do is, instead of showing a new popup, you can get the content of popup from ajax. What i mean is, on click of a button, call ajax function, get the content and have a div inside the modal-body, for example
<div class="dynamic-data">
</div>
and in ajax success function do like this
success: function(data){
$(".dynamic-data").html(data);
}

Resources