Posts

Showing posts from July, 2020

Testimonial Slider

HTML    <!--   #### EDIT   I built this slider when I first started to learn JS, you can rebuild it with more readable, simple and less code, I'm too lazy to update it, sorry :)   -->   <!--     -->  <!-- <section id="testim" class="testim">           <div class="testim-cover">                <div class="wrap">                   <span id="right-arrow" class="arrow right fa fa-chevron-right"></span>                   <span id="left-arrow" class="arrow left fa fa-chevron-left "></span>                   <ul id="testim-dots" class="dots">                       <li class="dot active"></li>                       <li class="dot"></li>                       <li class="dot"></li>                       <li class="dot"></li>                    

Dynamic Bootstrap Carousel Slider

<!-- <?php  // $slides = App\Slider::select('*')->get(); ?>--> <!--------------------Carousel Slider------------------------->  <!--<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">   <div class="carousel-inner">     @foreach ($slides as $i => $slide)     <div class="carousel-item @if($loop->first) active @endif" data-interval="2000">       <img src="{{asset('upload/slides/'.$slide->image_name)}}.jpg" class="d-block w-100" alt="...">     </div>     @endforeach       </div>   <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">     <span class="carousel-control-prev-icon" aria-hidden="true"></span>     <span class="sr-only">Previous</span>   &l

Methods Laravel

1. To use Dynamic Slug  Route::get('{slug}', 'IndexController@blog_details'); Route::get('{slug}', 'IndexController@news_details'); Link: {{ URL::to(''.$new->slug )}} 1. Fetch first/last entry in the table $video_news = App\News::oldest()->first(); $video_news = App\News::latest()->first();

Functions Built-in PHP

1.  strip_tags() Function The Data from Text Editor- SAVED WITH TAGS - into Database Table To display data on page without tags -  strip_tags() Function  is used Ex: {{strip_tags($blog->body)}} 2.  date() Function To Display Date from Database Table in desired Format {{date("l, F d, Y",strtotime($post->created_at))}} 2. substr () Function To Display String setting WORD LIMIT from Database Table in desired Format {{substr(strip_tags($post->body), 0, 150)}}

Display Latest N Number of Entries from Database Table

$dogs = Dogs :: orderBy ( 'id' , 'desc' )-> take ( 5 )-> get ();

Text Editor

Text Editor                <div class="form-group">                    <label for="title" class="col-sm-3 control-label">Event Details</label>                    <div class="col-sm-9">                        <textarea id="details" name="details" class="summernote">{{isset($event->details)?$event->details:null}}</textarea>                    </div>                </div> <script type="text/javascript">     $('.summernote').summernote({       airMode: true       }); </script> The Data from this Text Editor- SAVED WITH TAGS - into Database Table To display data on page without tags - strip_tags() Function is used Ex: {{strip_tags($blog->body)}}

Flex Box or Flexible Box

Image
Flex-box can be used to align boxes without assigning them width etc. <div class="flex_box">     <div class="flex_one">     </div>     <div class="flex_two">     </div>     <div class="flex_three">     </div> </div> display:flex; flex-direction: row; (Default)                          row-reverse;                          column;                          column-reverse; justify-content: flex-start; (Default)                            flex-end;                            center;                            space-around;                            space-between; align-items: flex-start;                      flex-end;                      center; .flex_one { flex:1; } .flex_two { flex:2; }               //To make this div of double width .flex_three { flex:1; } flex-grow flex-shrink flex-basis order align-self https://www.smashingmagazine.com/2018/08/flexbox-alignment/ https://www.smashingmagazine.com/

CDN Links

Bootstrap CDN <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src= "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity= "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin= "anonymous" ></script> <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin= "anonymous" ></script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity= "sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin= "anonymous" ></script&g

Upload Images

Upload Single Image if($request->file('reg_photo')){                                     // Uploading Registration photo                 $tmpFilePath = public_path('/assets/images/reg-photo/');                 // echo $tmpFilePath; die();                 $p_hadPath ='reg-photo_'.time();                 $img = Image::make($request->file('reg_photo'));                 $img->save($tmpFilePath.$p_hadPath.'.jpg');                 $reg_photo = $p_hadPath.'.jpg';             } Upload Multiple Images         $arr_degree_photo = [];         $degree_photo = $request->file('degree_photo'); foreach ($degree_photo as $file) {                 //   echo $name = $request->file('doctor_photo')->getClientOriginalName(), '.' . $request->file('doctor_photo')->getClientOriginalExtension();                 $doctor_degree_name = date('dmY') . microtime() . '.' . $file->getClientOriginal

Image Preview Scripts & Add Multiple Boxes Scripts

How to load Single Image Preview <input type="file" name="" id="" onchange="readURL(this, previewImage)"> <img id="previewImage" value="">  <script type="text/javascript">         function readURL(This, img_id) {         var reader = new FileReader();         reader.onload = function(e) {         $('img#'+img_id).attr('src', e.target.result);         $('img#'+img_id).addClass('on__changeImg');         $('img#'+img_id).css('border','1px solid #000');         }         reader.readAsDataURL(This.files[0]);         }   </script> How to load Single Image Preview <script> function readURL(input) {     if (input.files && input.files[0]) {         var reader = new FileReader();         reader.onload = function (e) {             $('#previewImage4').attr('src', e.target.result);         }         reader.readAsDataUR