davy_yg

Hello,

I found this tab codes that I want to implement.

ref: https://codepen.io/everdimension/pen/xZLggo?css-preprocessor=none

I copy paste the whole codes in a new folder but the codes do not work as expected.

I see this code on the top:

@use postcss-nested;

Now, how to install postcss-nested?

ref: https://www.npmjs.com/package/postcss-nesting

E:\xampp72\htdocs\ECOM_COMP\tab>npm install postcss-nesting --save-dev

	npm WARN saveError ENOENT: no such file or directory, open 'E:\xampp72\htdocs\ECOM_COMP\tab\package.json'
	npm notice created a lockfile as package-lock.json. You should commit this file.
	npm WARN enoent ENOENT: no such file or directory, open 'E:\xampp72\htdocs\ECOM_COMP\tab\package.json'
	npm WARN tab No description
	npm WARN tab No repository field.
	npm WARN tab No README data
	npm WARN tab No license field.

	+ [email protected]
	added 11 packages from 40 contributors and audited 11 packages in 4.057s

	1 package is looking for funding
	run `npm fund` for details

	found 0 vulnerabilities

	Do I need to install laravel for this simple web component?  I thought having these three files (html, js, css) could make the whole web works.

What's missing?

I am using this bootstrap:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

For reason does not works. I wonder why it works on my ref?

Where did you get the bootstrap link?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

This one works!

ref: https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp

Thanks.

For reason I cannot understand why bootstrap does not works?

ref: https://www.w3schools.com/bootstrap/

index.php

<hr><center><b>FEATURED</b></center><hr>

 <div class="row">
	<div class="col-md-3 col-xs-3">
		<img src="images/home/fea1.jpg">
		PRODUCT 1<br>
		Rp. 325.000<br>
		<img src="images/home/stars.jpg">
	</div>
	<div class="col-md-3 col-xs-3">	
		<img src="images/home/fea2.jpg">
		PRODUCT 2<br>
		Rp. 325.000<br>
		<img src="images/home/stars.jpg">
	</div>
	<div class="col-md-3 col-xs-3">
		<img src="images/home/fea3.jpg">
		PRODUCT 3<br>
		Rp. 325.000<br>
		<img src="images/home/stars.jpg">
	</div>
	<div class="col-md-3 col-xs-3">	
		<img src="images/home/fea4.jpg">
		PRODUCT 4<br>
		Rp. 325.000<br>
		<img src="images/home/stars.jpg">
	</div>
   </div>

On mobile version, I expect the layout show 1 product in each row so it should line up vertically. But this is not the case, it cramps up all the products in row.

Any clue why?

note:

col-md-3 (for laptop size) col-xs-3 (for mobile size)

Check this discussion:

https://laracasts.com/discuss/channels/site-improvements/laracasts-video

Where do laracasts put the video content? In laracasts server right?

It seems like laracasts video being blocked my internet provider just like vimeo. In my country they blocked all R-Rated contents.

I only wonder why including laracasts?

This is in localhost. I never create a restore point in my laptop.

For backup does *.SQL files are requirements ?

Backing up only mysql\data folder is not enough ?

Finally solved it.

<span style="float: right"></span>

Finally solved it.

<span style="float: right"></span>

For some reason after my xampp crash I backed up my data, update my phpmyadmin and my xampp fixed.

But now I got this error "Table doesn't exist in search enginee"

Any clue why?

ref: https://stackoverflow.com/questions/38759870/xampp-mysql-table-doesnt-exist-in-engine-1932/44799226

I thought backing up my folder data is enough to restore

I already design and built the front end and almost done with it. I only need help with the minor things.

I have taken many IT classes before. It's okay if I have to take twice as long to learn as long I reach the destination eventually. Each person just have different rewards.

I don't want to buy the theme, my point is I want to build onlineshop from scratch, if I can do this then I can build at least 10 different kind of online shop on my own. I modify the theme to match my needs.

I already have bootstrap

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
</style>

Okay, I am taking this codes for example:

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
  <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
  <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
  <a class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
 </nav>
 <div class="tab-content" id="nav-tabContent">
 <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...                </div>
 <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
 <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
 </div>

Which I copy from this link:

https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior

The tab has no content even after I replace the " ... " with dummy text. Also the tab does not look like the example.

What is missing?

How to create tabs like the following:

https://d-themes.com/html/donald/product.html

ref:

https://www.w3schools.com/howto/howto_js_full_page_tabs.asp

I find reference but I don't how to create the underline that has length match the text above it.

Does the button + and - button created seperately to the input box ?

Do I need javascript at all ?

Check this quantity button on this site:

https://d-themes.com/html/donald/product.html

I wonder how to create such button?

I only know how to create button with the following codes:

	<input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>

Check this link:

https://drive.google.com/file/d/1BUE4YPPEoTTvBvDDtU2PaPuGkdA9m1Fn/view?usp=sharing

about.php

<div class="col-md-9">
       
       <span class="col-90">
       <span style="font-size: 16px;">About Us</span>
       </span>

       <span class="col-10">
       <img src="images\pages\home.jpg" width="30">>>&nbsp;&nbsp;About Us<br><br>
       </span>
       

       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur interdum quis odio vel lacinia. Nulla     aliquet arcu nec neque laoreet, non euismod nisi ultricies. Donec quis posuere risus. Maecenas sed lacus id orci fermentum volutpat. Duis eu volutpat risus. Fusce egestas mi sit amet tempor interdum. Integer viverra posuere sem, eget euismod justo scelerisque eu. Donec tempor, quam varius egestas consequat, sapien purus feugiat justo, vitae viverra mauris leo vitae turpis. Sed id ante faucibus, pellentesque lacus finibus, vestibulum quam. Suspendisse sit amet mattis dui, eu rutrum magna. Mauris elementum magna ut sodales mattis. Suspendisse potenti. Aenean placerat sed arcu at iaculis. Cras at mattis ex. Duis vitae dui 			quam.<br><br>

Any clue how to align the home icon and about us breadcrumb text to the right? (I want to keep the about us title to the left)

I found the solution to this by adding:

.box {

width: 100%;
border: 1px solid;
border-color: #cbcbcb;
padding: 20px;

}

I found the solution to this by adding:

.box {

width: 100%;
border: 1px solid;
border-color: #cbcbcb;
padding: 20px;

}

For some reason, I cannot watch the video. There is no video appearing on the series. Any clue why?

I tried to fix the vimeo by doing this and unsuccessful:

https://www.thewindowsclub.com/vimeo-not-working-chrome-firefox

also by using google public DNS in Win 10.

https://developers.google.com/speed/public-dns

See the following pictures:

https://drive.google.com/file/d/1nu6Yl3bZkeV0hWO4K8DF0K5h1Ei-pjRN/view?usp=sharing

Around the thank you sentence and the order detail there are gray box. I wonder how to create the gray box with reponsive gray box?

Therefore, if I resize my web browser the gray box follows.

checkout.php

 <style>
 /*.container {
      width: 1350px !important;
 }*/

 .flex-container {
    display: flex;
    flex-wrap: nowrap;
    background-color: white;
 }

 .flex-container > div {
     background-color: #f1f1f1;
     width: 210px;
     margin: 5px;
     text-align: left;
     line-height: 25px;
     font-size: 14px; 
 }

 </style>


 <div class="flex-container">
	<div>
		<b>Product</b><br>
		Summer Fashion<br><br>
		Daniel Wellington<br>
	</div>
	<div>
		<b>Price</b><br>
		Rp. 300.000<br><br>
		Rp. 90.000<br>
	</div>
	<div>
		<b>Quantity</b><br>
		2<br><br>
		1<br>
	</div>  
	<div>
		<b>Size</b><br>
		Small<br><br>
		Medium<br>
	</div>
	<div>
		<b>Total</b><br>
		Rp. 600.000<br><br>
		Rp. 90.000<br>
	</div>
    </div>

The result of the code is:

https://drive.google.com/file/d/1e5gc1E6_axxptaOEFqrpj54aVNlec9qh/view?usp=sharing

In small mobile responsive version, it needs more height between the first row and the second row on quantity and size.

Any idea how?

ref: https://getbootstrap.com/docs/4.0/utilities/clearfix/

footer.php

<div class="clearfix"></div>


<div class="footer">

<div class="footer-con">	

Should add clearfix class to clear float before it.

ref: https://getbootstrap.com/docs/4.0/utilities/clearfix/

footer.php

<div class="clearfix"></div>


<div class="footer">

<div class="footer-con">	

Should add clearfix class to clear float before it.

Do you mean bootstrap grid system:

https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp ?

Is this part of the grids:

<div class="row">
   <div class="col-sm-2">
   </div>

   <div class="col-sm-4"> 
   </div>

   <div class="col-sm-6">
   </div>
</div>

Also, please help me check this out:

https://drive.google.com/file/d/17WN99iZR53TpvSxpFh8GgWnv0mDNiO7n/view?usp=sharing

I wonder why the gray footer background does not press downward?

dude, I am only sharing jpg files.

one jpg file for each link. I already did these repeatedly.

I am building this online shop:

https://drive.google.com/file/d/1FFgkkbPzbS_ZKEgu9cpKPXwpbAuCXPkX/view?usp=sharing

This is the example in the mobile version that I would expect:

https://drive.google.com/file/d/1uFhbhrta13IBZrTwPl3j096Z5KeU4QDb/view?usp=sharing

Instead it would show the thumbnail first appears in vertical then the product picture next.

My codes:

<div class="row">
    <div class="col-sm-2">

<img src="images\prod_detail\thumb1.jpg" width="150"><br><br>
<img src="images\prod_detail\thumb2.jpg" width="150"><br><br>
<img src="images\prod_detail\thumb3.jpg" width="150"><br><br>
<img src="images\prod_detail\thumb4.jpg" width="150"><br><br>

</div>

<div class="col-sm-4">

	<img src="images\prod_detail\prod.jpg" width="450">	

</div>

<div class="col-sm-6">

<img src="images\prod_detail\breadcrumb.jpg"><br><br>
<img src="images\prod_detail\prod title.jpg"><br><br>
<img src="images\prod_detail\prod price.jpg"><br><br>
<img src="images\prod_detail\prod stars.jpg"><br><br>
<img src="images\prod_detail\prod desc.jpg"><br><br>
<img src="images\prod_detail\prod color.jpg"><br><br>
<img src="images\prod_detail\prod size.jpg"><br><br>
<img src="images\prod_detail\prod qty.jpg"><img src="images\prod_detail\button.jpg"><br><br>
<img src="images\prod_detail\prod wishlist.jpg"><br><br>

</div>
</div>

Anything wrong?

Hello,

I would like to know how to add video plugin in ckeditor:

https://ckeditor.com/cke4/addon/video

I don't understand the where to add these:

CKEDITOR.config.extraPlugins = 'toolbar'; CKEDITOR.config.extraPlugins = 'video'; CKEDITOR.config.extraPlugins = 'dialog'; CKEDITOR.config.extraPlugins = 'dialogui'; CKEDITOR.config.extraPlugins = 'fakeobjects';

As far as now I added them in ckeditor\samples\old\toolbar\toolbar.html

Yet, I don't see the video icon appears. Any clue why?

Now, I try to add video plugin to ckeditor:

https://ckeditor.com/cke4/addon/video

The only place that I know to add config.extraPlugins is in here:

ckeditor\samples\old\toolbar\toolbar.html

CKEDITOR.config.extraPlugins = 'toolbar'; CKEDITOR.config.extraPlugins = 'video'; CKEDITOR.config.extraPlugins = 'dialog'; CKEDITOR.config.extraPlugins = 'dialogui'; CKEDITOR.config.extraPlugins = 'fakeobjects';

I don't know where the other correct place is?

Yet, the video icon still did not appears. Any clue why?

For some reason it still does not works!

ref: https://appuals.com/how-to-fix-no-video-with-supported-format-and-mime-type-found/

I do not know where to change the setting where to upload in froala.

Should I changes my cms to ckeditor to make it works?

My site shows this error:

Illuminate\Database\QueryException SQLSTATE[HY000]: General error: 1835 Malformed communication packet (SQL: select * from portfolio order by created_at desc limit 8)

It works earlier until one day I found the above error message.

ref: https://stackoverflow.com/questions/64677836/sqlstatehy000-general-error-1835-malformed-communication-packet-on-laravel

If I upgrade my php version to 7.3 I am afraid if another error might appears since I built it under php 7.2.

I uploaded a video with froala and get this error message:

No video with supported format and MIME type found

on the video.

ref: https://appuals.com/how-to-fix-no-video-with-supported-format-and-mime-type-found/

I did everything on the link to fix it and the error remains. (no video appears)

I will try that suggestion after this post, I have another question such as I insert video in my content editor. Then, when trying to see the content, my website loads so slowly.

I can wait forever just waiting for this 1 minute video to loads.

I am using Froala free version. On the blog list on the first page, I am listing the summary of each blog and the main image.

And on the blog detail page, I would like to show all the contents (I have no problem on this).

Right now, my problem is not only the main image appears on the blog list, the second image also appears if I have the second image on the blog.

On wordpress, they can cut the main image into particular size. I mean only showing certain part of the image (in a fixed size). and only show text next to it (eventhough I have many images before the text).

Hello,

I want to create a blog list for the company I work for. Now, I create this articles using text rich input which could includes pictures and text.

Now, on the blog list on the front, I only want to show 1 main image and text only next to it. Any clue how to do this?

Symfony\Component\Debug\Exception\FatalThrowableError Too few arguments to function Illuminate\Database\Query\Builder::orderByDesc(), 0 passed in E:\xampp72\htdocs\aws_admin\vendor\laravel\framework\src\Illuminate\Support\Traits\ForwardsCalls.php on line 23 and exactly 1 expected http://localhost/aws_admin/public/f_web_portfolio

Get this error

I am trying to sort my portfolio desc:

public function web_portfolio()
	{
    $list = WebPortfolio::all()->sortByDesc();

    $blogs = Blog::take(3)->get();

    PageSeen::where('menu', 'Web Portfolio')->increment('view');

	return view('web_portfolio')->with(compact('list', 'blogs'));
	}

ref: https://laravel.com/docs/8.x/collections#method-sortbydesc

I got this error:

Symfony\Component\Debug\Exception\FatalThrowableError Too few arguments to function Illuminate\Support\Collection::sortByDesc(), 0 passed in E:\xampp72\htdocs\aws_admin\app\Http\Controllers\FPController.php on line 43 and at least 1 expected

Any clue how?

Hello,

I am trying to update the service content:

HomeIntroController.php

public function update(Request $request, $id)
	{
    //

    $intro = HomeIntro::find($id);

        $this->validate($request, [
            'title' => 'required',
            'content' => 'required|max:5000'
        ]);

    

    $intro->title = $request->title;
    $intro->content = $request->content;

    $intro->update();

    Session::flash('flash', 'Successfully save data');

    $intro = HomeIntro::find($id);

    dd($intro);
    
    return view('admin.home.home_intro')->with('list', $intro);
	}

There is one problem with this issue. It looks like it still showing the old data - "the data before I updated the content."

How to update the content then showing the new data?

Can you use Js syntax such as promise? I forget how to implement the syntax if that is possible.

With Gmail I only get one email message.

With Yahoo I get two identical email messages. Any clue why?

The only problem is I rarely check my gmail message. I often checked my yahoo email in case the user send me an email by replying the feedback form.

No email receive!

It only triggers once!

[2020-10-20 06:55:19] local.DEBUG: Mail was sent!

but I receive two emails.

without to what the code looks like?

 Mail($contact->contact_email)
        ->send(new FeedbackMail($request->all()));

Like this?

Yes.

For example: 1 email with 2 bodies with the messages:

Feedback Mail (2)

Feedback untuk Anda

Name : John

Email : [email protected]

Posisi : Developer

Pelayanan : 4

Pesan : Top!

       *******************************************

To: [email protected]

Feedback untuk Anda

Name : John

Email : [email protected]

Posisi : Developer

Pelayanan : 4

Pesan : Top!

Anything to do with this:

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mail.yahoo.com
MAIL_PORT=465
[email protected]
MAIL_PASSWORD=*******
MAIL_ENCRYPTION=ssl
MAIL_FROM_NAME="Advance Web Studio"
[email protected]

FeedbackMail.php

class FeedbackMail extends Mailable
{
	use Queueable, SerializesModels;

	/**
 	* Create a new message instance.
 	*
 	* @return void
 	*/
	public function __construct($data = [])
	{
    //
    $this->data['nama'] = $data['nama'];
    $this->data['email'] = $data['email'];
    $this->data['posisi'] = $data['posisi'];
    $this->data['servis'] = $data['servis'];
    $this->data['pesan'] = $data['pesan'];
	}

	/**
 	* Build the message.
 	*
 	* @return $this
 	*/
	public function build()
	{
    return $this->
        subject("Feedback Mail")->
        view('mail.feedback', $this->data);
	}
}

Yes identical. Exactly the same email as if filling the form twice.

I receive two similar emails. It appears like one email but that one email has two email bodies with the same contents.

Hello,

I created this feedback form:

feedback.blade.php

<h3><b>FEEDBACK</b></h3><br><br>

@if($errors->any())
		<div class="alert alert-danger">
    		@foreach($errors->all() as $error)
        	<li>{{ $error }}</li>
    @endforeach
		</div>
@endif

@if($message = Session::get('flash'))
		<div id="flash" class="alert alert-success">
    		{{ $message }}
		</div>
@endif

<br>
<form class="form-horizontal" action="{{ url('sendfeedback') }}" method="POST">
@csrf
<div class="form-group">
	<label class="control-label col-sm-2" for="nama">Nama:</label>
		<div class="col-sm-4">
 			<input type="text" class="form-control" name="nama" id="email">
		</div>
	</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-4">
 	<input type="email" class="form-control" name="email" id="pwd" >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="posisi">Posisi:</label>
<div class="col-sm-4">
 	<input type="text" class="form-control" name="posisi" id="pwd" >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="servis">Pelayanan:</label>&nbsp;&nbsp;&nbsp;&nbsp;
<div class="col-sm-6">
    <input type="radio" id="servis" name="servis" value="5">
    <label for="servis">5 (Baik Sekali)</label>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" id="servis" name="servis" value="4">
    <label for="servis">4 (Baik)</label>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" id="servis" name="servis" value="3">
    <label for="servis">3 (Cukup)</label>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" id="servis" name="servis" value="2">
    <label for="servis">2 (Buruk)</label>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" id="servis" name="servis" value="1">
    <label for="servis">1 (Buruk Sekali) </label>&nbsp;&nbsp;&nbsp;&nbsp;
	</div>                             
</div>

 <div class="form-group">
<label class="control-label col-sm-2" for="pesan">Pesan:</label>
<div class="col-sm-4">
 	<textarea name="pesan" class="form-control"></textarea>
</div>
</div>


<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
 	<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>

FPController.php

public function sendfeedback(request $request)
	{   
    $this->validate($request, [

        'nama' => 'required',
        'posisi' => 'required',
        'email' => 'required',
        'servis' => 'required',
        'pesan' => 'required'
    ]);

    $blogs = Blog::take(3)->get();

    $contact = Contact::find(1);

    Mail::to($contact->contact_email)
        ->send(new FeedbackMail($request->all()));

    Session::flash('flash', 'Sukses mengirim pesan feedback');

    return view('feedback')->with(compact('blogs'));
	}

I only wonder why after filling in the feedback form, I get two similar email messages?

It's there!

$(document).ready(function() {
  $(".testimonial-carousel").slick({
		infinite: true,
		slidesToShow: 1,
		slidesToScroll: 1,
		autoplay: false,
		arrows: true,
		prevArrow: $(".testimonial-carousel-controls .prev"),
		nextArrow: $(".testimonial-carousel-controls .next")
   });
});

It works in the downloaded files. If I open the downloaded files in its own folder the slider works. It does not work after I integrate it with the website.

$(".testimonial-carousel").slick({

slick is underlined in red mentioning that "Type error is not a function".

When trying to make the testimonial slider that I downloaded from the internet, I get this error:

Uncaught TypeError: $(...).slick is not a function
<anonymous> http://localhost/aws_admin/public/js/test-slider-fullwidth.js:2
jQuery 2
    j
    k

These are my headers:

<!-- untuk testimonial slider -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="{{ url('css/test-slider-fullwidth.css') }}" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="{{ url('js/test-slider-fullwidth.js') }}"></script>

<!-- end testimonial slider -->

Any clue why? The header slider also does not work! Unlike the example.