laravel - append html code from database into a page - ajax

I will try to keep it simple in database I have 2 fields, name = name of site and html = html code of that site.
Database looks like this:
UPDATE `websites` SET `name` = 'name', `html` = ' <title>Template 1</title> <link href="http://localhost/templates/css.css" rel="stylesheet" type="text/css"> <div class="logo"> <img class="images" id="image" src="#" alt="Your Logo"> </div> <div contenteditable="true" id="content" class="draggable ui-widget-content refresh ui-draggable ui-draggable-handle" style="position: relative; left: 209px; top: 139px;"><p>Change Text inside this box</p></div> <div id="editTxt" class="refresh" contenteditable="true"> <p>This text can be by the user.</p> </div> ' WHERE `websites`.`id` = 1;
Now when I type into browser localhost/website/{name} I would like to append html code from that database into a browser using ajax.
I have started something like this:
Controller:
function websites($name)
{
$websites = Website::all();
return view('layouts/website', ['websites' => $websites]);
$name = $websites->name;
}
Route:
Route::get('website/{name}', 'BuilderController#websites');
website.blade.php:
#extends('layouts.master') #section('title', 'Website Builder') #section('content')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<div class="container template_class ">
#foreach ($websites as $website)
<a class="content-link" href="{{ asset($website->name )}}">
<img src="{{ asset($website->html )}}"/>
</a> #endforeach
</div>
</body>
<link href="{{asset('css/bootstrap-colorpicker.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('css/bootstrap-formhelpers.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset ('//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css')}}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{!! asset('js/bootstrap-colorpicker.min.js') !!}">
</script>
<script type="text/javascript" src="{!! asset('js/bootstrap-formhelpers.js') !!}">
</script>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
<script type="text/javascript" src="{!! asset('js/bootstrap-filestyle.min.js') !!}">
</script>
</html>
#endsection #show
Can anyone help me get started?

You're wanting to Displaying Unescaped Data:
By default, Blade {{ }} statements are automatically sent through
PHP's htmlentities function to prevent XSS attacks. If you do not want
your data to be escaped, you may use the following syntax:
{!! $website->html !!}

Related

Display data from database in datatable

I have a table "karyawans" which contains 104 data and i want to display it all in a datatable. i have done all manual from datatable and here is the result
![datatable result][1]
here is my data
![my data][2]
here is the view
#extends('layout.main')
#section('container')
<!-- page content -->
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3><small>Daftar karyawan yang telah ditambahkan</small></h3>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_title">
<h2>Karyawan <small>Users</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false"><i class="fa fa-wrench"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Settings 1</a>
</div>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="row">
<div class="col-sm-12">
<div class="card-box table-responsive">
<table id="datatable" class="table table-striped table-bordered"
style="width:100%">
<thead>
<tr>
<th>NIK</th>
<th>Nama</th>
<th>Username</th>
<th>Email</th>
<th>Unit</th>
<th>Jabatan</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach ($karyawans as $karyawan)
<tr>
<td>{{ $karyawan->nik }}</td>
<td>{{ $karyawan->nama }}</td>
<td>{{ $karyawan->username }}</td>
<td>{{ $karyawan->email }}</td>
<td>{{ $karyawan->unit }}</td>
<td>{{ $karyawan->jabatan }}</td>
<td>
<div class="row d-flex justify-content-center">
Ubah
Hapus
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
and here is where I store the css and js
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{{ asset('images/rs.png') }}" type="image/png" />
<title>Sistem Manajemen Pekerjaan </title>
<!-- Bootstrap -->
<link href="{{ asset('../vendors/bootstrap/dist/css/bootstrap.min.css') }}" type="text/css"
rel="stylesheet">
<!-- Font Awesome -->
<link href="{{ asset('../vendors/font-awesome/css/font-awesome.min.css') }}" type="text/css"
rel="stylesheet">
<!-- NProgress -->
<link href="{{ asset('../vendors/nprogress/nprogress.css') }}" type="text/css" rel="stylesheet">
<!-- iCheck -->
<link href="{{ asset('../vendors/iCheck/skins/flat/green.css') }}" rel="stylesheet">
<!-- bootstrap-progressbar -->
<link
href="{{ asset('../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css') }}"
type="text/css" rel="stylesheet">
<!-- JQVMap -->
<link href="{{ asset('../vendors/jqvmap/dist/jqvmap.min.css') }}" rel="stylesheet" />
<!-- bootstrap-daterangepicker -->
<link href="{{ asset('../vendors/bootstrap-daterangepicker/daterangepicker.css') }}"
type="text/css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="{{ asset('../build/css/custom.min.css') }}" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="{{ asset('//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css') }}">
{{-- <link rel="stylesheet" type="text/css"
href="{{ asset('https://cdn.datatables.net/v/bs5/dt-1.11.3/af-2.3.7/b-2.0.1/cr-1.5.5/date-1.1.1/fc-4.0.1/fh-3.2.0/kt-2.6.4/r-2.2.9/rg-1.1.4/rr-1.2.8/sc-2.0.5/sb-1.3.0/sp-1.4.0/sl-1.3.3/datatables.min.css') }}"> --}}
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
#include('partial.nav_bar')
<!-- top navigation -->
#include('partial.top_nav')
<!-- /top navigation -->
<!-- page content -->
<div class="container">
#yield('container')
</div>
<!-- /page content -->
<!-- footer content -->
#include('partial.footer')
<!-- /footer content -->
</div>
</div>
<!-- jQuery -->
<script type="text/javascript" src="{{ asset('../vendors/jquery/dist/jquery.min.js') }}">
</script>
<!-- Bootstrap -->
<script type="text/javascript"
src="{{ asset('../vendors/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>
<!-- FastClick -->
<script type="text/javascript" src="{{ asset('../vendors/fastclick/lib/fastclick.js') }}">
</script>
<!-- NProgress -->
<script type="text/javascript" src="{{ asset('../vendors/nprogress/nprogress.js') }}"></script>
<!-- Chart.js -->
<script type="text/javascript" src="{{ asset('../vendors/Chart.js/dist/Chart.min.js') }}">
</script>
<!-- gauge.js -->
<script type="text/javascript" src="{{ asset('../vendors/gauge.js/dist/gauge.min.js') }}">
</script>
<!-- bootstrap-progressbar -->
<script type="text/javascript"
src="{{ asset('../vendors/bootstrap-progressbar/bootstrap-progressbar.min.js') }}"></script>
<!-- iCheck -->
<script type="text/javascript" src="{{ asset('../vendors/iCheck/icheck.min.js') }}"></script>
<!-- Skycons -->
<script type="text/javascript" src="{{ asset('../vendors/skycons/skycons.js') }}"></script>
<!-- Flot -->
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.pie.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.time.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.stack.js') }}">
</script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.resize.js') }}">
</script>
<!-- Flot plugins -->
<script type="text/javascript"
src="{{ asset('../vendors/flot.orderbars/js/jquery.flot.orderBars.js') }}"></script>
<script type="text/javascript"
src="{{ asset('../vendors/flot-spline/js/jquery.flot.spline.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/flot.curvedlines/curvedLines.js') }}">
</script>
<!-- DateJS -->
<script type="text/javascript" src="{{ asset('../vendors/DateJS/build/date.js') }}"></script>
<!-- JQVMap -->
<script type="text/javascript" src="{{ asset('../vendors/jqvmap/dist/jquery.vmap.js') }}">
</script>
<script type="text/javascript"
src="{{ asset('../vendors/jqvmap/dist/maps/jquery.vmap.world.js') }}"></script>
<script type="text/javascript"
src="{{ asset('../vendors/jqvmap/examples/js/jquery.vmap.sampledata.js') }}"></script>
<!-- bootstrap-daterangepicker -->
<script type="text/javascript" src="{{ asset('../vendors/moment/min/moment.min.js') }}"></script>
<script type="text/javascript"
src="{{ asset('../vendors/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<!-- Custom Theme Scripts -->
<script type="text/javascript" src="{{ asset('../build/js/custom.min.js') }}"></script>
<!-- dataTables -->
<script type="text/javascript"
src="{{ asset('//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js') }}">
$(document).ready(function() {
$('#datatable').DataTable();
});
</script>
{{-- <script type="text/javascript"
src="{{ assset('https://cdn.datatables.net/v/bs5/dt-1.11.3/af-2.3.7/b-2.0.1/cr-1.5.5/date-1.1.1/fc-4.0.1/fh-3.2.0/kt-2.6.4/r-2.2.9/rg-1.1.4/rr-1.2.8/sc-2.0.5/sb-1.3.0/sp-1.4.0/sl-1.3.3/datatables.min.js') }}">
</script> --}}
</body>
</html>
here is the KaryawanController
public function daftar_karyawan()
{
return view('karyawans', [
"karyawans" => Karyawan::first()->filter(request(['cari']))->orderBy('id', 'asc')
->paginate(10)->withQueryString()
]);
}
FYI, I try to use the manual paginaton and searching before i know the 'datatables'
and this is the route
Route::get('/daftar_karyawan', [KaryawanController::class, 'daftar_karyawan']);
``
Sorry if there is an mistake in writing my question, because I am new to this forum and this is my first question, thank you
[1]: https://i.stack.imgur.com/GGQID.png
[2]: https://i.stack.imgur.com/R2X22.png
Remove Paginate(10) and replace with get() in KaryawanController
public function daftar_karyawan()
{
return view('karyawans', [
"karyawans" => Karyawan::first()->filter(request(['cari']))->orderBy('id', 'asc')
->get()
]);
}
You can't use Paginate() for the datatable because it will limit to 10 :)
Just use get() and datatable will auto paginate !
ps:
If retrieving more than 1000 rows then there is a high chances system will load slow. Recommended to use AJAX to prevent this issue :)

Eonasdan DatePicker not working in Laravel 5.5

I'm trying to use the package bootstrap-datetimepicker. I had already followed the installation tutorial. But I couldn't accomplish to get it to work. I imported the files required into app\publicfolder as well.
My Folder Structure
public folder structure
My blade file
<html>
<head>
<title>Laravel Bootstrap Datepicker</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- JS AND CSS -->
<script type="text/javascript" src="{{ URL::asset('js/jquery-3.3.1.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/moment.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('js/bootstrap.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/bootstrap-datetimepicker.js')}}"></script>
<link href="{{ asset('css/bootstrap.css')}}" rel="stylesheet">
<link href="{{ asset('css/bootstrap-datetimepicker.css')}}" rel="stylesheet">
</head>
<body>
<!-- DATATIME PICKER CODE -->
<img src="{{asset('goku.jpg')}}" alt="Mountain View">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<input type='text' class="form-control " />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker5').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
</script>
</div>
</div>
</body>
</html>
My Result
The result I'm getting is this, an import with a fail icon. And nothing showing up while clicking.

Lightbox doesn't work in laravel app

I am trying to implement lightbox in laravel but it doesn't load the arrows(left,right ...) from the lightbox css file.With Fancybox i have an issue when i click on the image, the size overflows for 1,2s and then it appears at the normal size in the center of the screen(I have image below).The arrows path public/lightbox/img.
Below is my code
default.blade.php
<title>My personal website</title>
<link rel="shortcut icon" href="{{ asset('favicon.png') }}" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/style.css') }}" type="text/css"/>
<link rel="stylesheet" href="{{ asset('css/lightbox.css') }}" type="text/css"/>
</head>
<body>
<div class="container">
<header>
#include('template.partial.nav')
</header>
#yield('content')
</div>
#include('template.partial.footer')
<!-- ***Scripts*** -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="js/lightbox.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{{ asset('js/test.js') }}"></script>
</body>
</html>
portfolio.blade.php
#extends('template.default')
#section('content')
<div id="portfolio">
<div class="row">
<p class="heading">Portfolio</p>
</div>
<div class="row">
<div class="col-md-12">
<p class="subheading">Java application</p>
<hr>
<h2 style="text-align:center">Lightbox</h2>
<a data-lightbox="roadtrip" href="{{ asset('lightbox/img/demopage/rsz_java1.png') }}">
<img src="{{ asset('lightbox/img/demopage/java1.png') }}" width="150" height="100">
</a>
<a data-lightbox="roadtrip" href="{{ asset('lightbox/img/demopage/rsz_java1.png') }}">
<img src="{{ asset('lightbox/img/demopage/java1.png') }}" width="150" height="100">
</a>
</div>
</div>
#endsection
Console errors:
portfolio:1 GET http://{projectname}/img/next.png 404 (Not Found)
portfolio:1 GET http://{projectname}/img/close.png 404 (Not Found)
portfolio:1 GET http://{projectname}/img/loading.gif 404 (Not Found)
portfolio:1 GET http://{projectname}/img/prev.png 404 (Not Found)
Thanks in advance!
Please, upgrade jQuery to the latest (see https://github.com/fancyapps/fancybox/issues/1504)
Also, fancyBox v3 does not use any images, all icons (including loading animation) are created using CSS only. Make sure you are not mixing multiple lightbox scripts.

Laravel view not displaying

Hi after I click on a page:
Websites
i get an error saying:
View [layoults.pages] not found.
Route:
Route::get('pages', 'BuilderController#websites');
ControlleR:
function websites()
{
$websites = Website::all();
return view('layoults/pages', ['websites' => $websites]);
$webid= $websites->id;
}
pages.blade.php:
#extends('layouts.master') #section('title', 'Website Builder') #section('content')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<div class=flex-container>
<div class="flex-item templates">
#foreach ($websites as $website)
<a class="content-link" href="{{ asset($website->name )}}">
</a> #endforeach
</div>
</div>
</body>
<link href="{{asset('css/bootstrap-colorpicker.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('css/bootstrap-formhelpers.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset ('//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css')}}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{!! asset('js/bootstrap-colorpicker.min.js') !!}">
</script>
<script type="text/javascript" src="{!! asset('js/bootstrap-formhelpers.js') !!}">
</script>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
<script type="text/javascript" src="{!! asset('js/bootstrap-filestyle.min.js') !!}">
</script>
</html>
#endsection #show
So could someone please tell me what is going on? as far as I can see, everything seems correct.
typo in your code try following lines in your controller
function websites()
{
$websites = Website::all();
return view('layouts/pages', ['websites' => $websites]);
}

[Vue warn]: Cannot find element: #app

I have a fresh installed laravel project with all the components updated.
All I did is tried to add app.js in my welcome.blade.php file, after adding the following I get this error
[Vue warn]: Cannot find element: #app
I followed this thread, but it's not relevant as my script is at the bottom of the page.
https://laracasts.com/discuss/channels/vue/fresh-laravel-setup-and-vue-2-wont-work
Here's my file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{$project}} | {{ $title }}</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet" type="text/css"/>
<style>
...
</style>
</head>
<body class="sticky-nav">
<div id="nav">
<div class="display-sm">
<header class="top-header">
<span class="menu-icon">☰</span>
</header>
</div>
<div class="custom-container">
<div id="logo" class="float-left">
<img alt="xyz" src="/images/xyz.png"/><span> xyz</span>
</div>
<div id="btn-project" class="float-right">
<a title="project" href="#" class="btn btn-project">Project</a>
</div>
</div>
</div>
<div class="sub-container">
<h1 id="header-title">{{ $header_title }}</h1>
<h2 id="meta-data"><i class="fa fa"></i>{{$location}} <span id="category"> <i></i>{{$category}} </span></h2>
<div class="clear"></div>
</div>
<script src="/js/app.js"></script>
<script>
var wrap = $(".sticky-nav");
wrap.on("scroll", function (e) {
if (this.scrollTop > 147) {
wrap.find('#nav').addClass("fix-nav");
} else {
wrap.find('#nav').removeClass("fix-nav");
}
});
</script>
</body>
</html>
Error says it all. Vue can't find #app element, so you need to add it:
<div id='app'></div>
https://v2.vuejs.org/v2/guide/
Sometime everything seems got , but we are still getting same error then you have to copy this code and paste in app. blade.
<head>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
.
.
.
.
.
.
</div>
</body>
Verify that your main design file app.blade.php contains a div with the app id just after the <body> tag just like this:
<body>
<div id="app">
.
.
.
</div>
</body>

Resources