Applications.ge

add column to datatable

{
    $query = Comment::with('user')
        ->where('model', $model)
        ->where('model_id', $model_id)
        ->orderBy('id', 'desc');

    return DataTables::of($query->get())
        ->addColumn('user_roles', function ($comment) {
            return $comment->user->getRoleNames()->implode(', ');
        })
        ->toJson();
}

we can add new column to datatable json data using this

by Giorgi Ivanidze

Laravel

PHP

datatable

Commonly used attributes

HTML attributes are additional properties that can be added to HTML elements to provide extra information or modify the behavior of the elements. id:

<div id="myElement">This is a div with an ID</div>

class:

<p class="highlighted">This paragraph has a class</p>

style:

<span style="color: red; font-size: 16px;">Red and larger text</span>

src:

<img src="image.jpg" alt="An image">

href:

<a href="https://www.example.com">Visit Example</a>

href:

<img src="image.jpg" alt="A beautiful landscape">

alt:

<img src="image.jpg" alt="A beautiful landscape">

disabled:

<button type="button" disabled>Disabled Button</button>

required:

<input type="text" required>

by Luka Tatarishvili

HTML

Attributes

Custom Data Attributes

Custom Data Attributes

allow us to

attach

custom

data

to

HTML elements

without affecting the element's functionality or appearance. Syntax: To create a custom data attribute, you need to use the data- prefix followed by your chosen attribute name. Example:

<div data-info="example-data" data-count="42">Custom Data Attributes</div>

In this example, we have added two custom data attributes, data-info and data-count, to a <div> element. Accessing Data Attributes with JavaScript:

<div id="myDiv" data-info="example-data" data-count="42">Custom Data Attributes</div>

<script>
  const myDiv = document.getElementById("myDiv");
  
  // Accessing individual data attributes
  const infoData = myDiv.dataset.info;
  const countData = myDiv.dataset.count;
  
  console.log(infoData); // Output: "example-data"
  console.log(countData); // Output: "42"
</script>

Modify:

<div id="myDiv" data-info="example-data" data-count="42">Custom Data Attributes</div>

<script>
  const myDiv = document.getElementById("myDiv");
  
  // Modifying data attributes
  myDiv.dataset.info = "new-data";
  myDiv.dataset.count = 100;
</script>

Using Custom Data Attributes with Events:

<button data-action="delete" data-id="123">Delete Item</button>

<script>
  const deleteButton = document.querySelector("[data-action='delete']");
  
  deleteButton.addEventListener("click", function(event) {
    const itemId = event.target.dataset.id;
    console.log("Deleting item with ID:", itemId);
    // Perform the delete operation using the itemId
  });
</script>

by Luka Tatarishvili

HTML

Attributes

HTML <PRE> TAG

The

<pre>

tag defines preformatted text. Text in a

<pre>

element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.

by Tinatin Kvinikadze

HTML

<PRE>

სინტაქქსები

დეკლარაცია განსაზღვრავს, რომ ეს

<!DOCTYPE html>

დოკუმენტი არის HTML5 დოკუმენტი

<html>

ელემენტი არის HTML გვერდის ძირითადი ელემენტი

<head>

ელემენტი შეიცავს მეტა ინფორმაციას HTML გვერდის შესახებ ელემენტი განსაზღვრავს სათაურს HTML გვერდისთვის ( <title>რომელიც ნაჩვენებია ბრაუზერის სათაურის ზოლში ან გვერდის ჩანართში) ელემენტი განსაზღვრავს დოკუმენტის <body>სხეულს და წარმოადგენს კონტეინერს ყველა ხილული შინაარსისთვის, როგორიცაა სათაურები, აბზაცები, სურათები, ჰიპერბმულები, ცხრილები, სიები და ა.შ.

<h1>

ელემენტი განსაზღვრავს დიდ სათაურს

<p>

ელემენტი განსაზღვრავს აბზაცს

by ვაჟა ტყემალაძე

HTML

html

Meta tags

control how a webpage is displayed on different devices by adjusting the width and initial zoom level of the viewport to match the device's screen size

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width

- sets the width of the viewport to be equal to the width of the device's screen. This ensures that the webpage adapts and fills the entire width of the device, regardless of its specific screen size or resolution. CSS media query works properly with any device by setting device width to viewport

initial-scale=1

- sets the initial zoom level when the webpage is first loaded. A value of 1 means that the webpage will be displayed at a 1:1 ratio, without any zooming or scaling applied

by ვაჟა ტყემალაძე

HTML

html

meta tags

Semantic tags sum up

Summary of semantical meaning tags: Tags with Semantic Meaning:

<strong>

<em>

Tags without Semantic Meaning:

<b>

<I>

<mark>

<small>

<del>

<ins>

<sub>

<sup>

<s>

<u>

<be>

<pre>

by ვაჟა ტყემალაძე

HTML

html

Semantic tags

Header: The

<header>

tag defines the header of a document or section. Nav: The

<nav>

tag defines a navigation bar. Section: The

<section>

tag defines a section of a document. Article: The

<article>

tag defines an independent piece of content, such as a blog post or news article. ** aside:** The

<aside>

tag defines a sidebar or other secondary content. Footer: The

<footer>

tag defines the footer of a document or section. figure: The

<figure>

tag defines a self-contained piece of content, such as an illustration, diagram, photo, code listing, etc. figcaption: The

<figcaption>

tag defines a caption for a figure. h1-h6: The

<h1>

through

<h6>

tags define headings of different levels. main: The

<main>

tag defines the main content of a document. a: The

<a>

tag defines a hyperlink. form: The

<form>

tag defines a form. input: The

<input>

tag defines an input field. img: The

<img>

tag defines an image. blockquote: The

<blockquote>

tag defines a quotation. time: The

<time>

tag defines a date or time. mark: The

<mark>

tag defines a highlighted passage of text. b: The

<b>

tag defines bold text. strong: The

<strong>

tag defines strong text. em: The

<em>

tag defines emphasized text. code: The

<code>

tag defines code snippets. pre: The

<pre>

tag defines preformatted text.

by ვაჟა ტყემალაძე

HTML

html

Sematnical tags

Header: The

<header>

tag defines the header of a document or section. Nav: The

<nav>

tag defines a navigation bar. Section: The

<section>

tag defines a section of a document. Article: The

<article>

tag defines an independent piece of content, such as a blog post or news article. ** aside:** The

<aside>

tag defines a sidebar or other secondary content. Footer: The

<footer>

tag defines the footer of a document or section. figure: The

<figure>

tag defines a self-contained piece of content, such as an illustration, diagram, photo, code listing, etc. figcaption: The

<figcaption>

tag defines a caption for a figure. h1-h6: The

<h1>

through

<h6>

tags define headings of different levels. main: The

<main>

tag defines the main content of a document. a: The

<a>

tag defines a hyperlink. form: The

<form>

tag defines a form. input: The

<input>

tag defines an input field. img: The

<img>

tag defines an image. blockquote: The

<blockquote>

tag defines a quotation. time: The

<time>

tag defines a date or time. mark: The

<mark>

tag defines a highlighted passage of text. b: The

<b>

tag defines bold text. strong: The

<strong>

tag defines strong text. em: The

<em>

tag defines emphasized text. code: The

<code>

tag defines code snippets. pre: The

<pre>

tag defines preformatted text.

by Luka Tatarishvili

HTML

HTML Formatting Elements

Formatting elements were designed to display special types of text: - Bold text

<p>This is a <b>bold</b> text.</p>

- Important text // Has semantic meaning

<p>This is an <strong>important</strong> point to remember.</p>

- Italic text

<p>This is <i>italic</i> text.</p>

- Emphasized text // Has semantic meaning

<p>This is <em>emphasized</em> text.</p>

- Marked text

<p>Please <mark>review</mark> the important points in the document.</p>

- Smaller text

<p>This is some <small>additional information</small> about the topic.</p>

<del> - Deleted text

<p>I changed my mind and <del>don't</del> want to go to the party.</p>

<ins> - Inserted text

<p>I <ins>really</ins> enjoyed the movie.</p>

- Subscript text

<p>H2O is the chemical formula for water, where 2 is written as H<sub>2</sub>O.</p>

- Superscript text

<p>The area of a circle is calculated using the formula A = πr<sup>2</sup>.</p>

<s> - Strikethrough

<p>This product is currently <s>out of stock</s>.</p>

- Underline:

<p><u>This text is underlined.</u></p>

- Break

<p>This is the first line.<br>This is the second line.</p>

<pre> - Preformatted:

<pre>
    function sayHello() {
        console.log("Hello, world!");
    }
</pre>

Summary of semantical meaning tags: Tags with Semantic Meaning:

<strong>
<em>

Tags without Semantic Meaning:

<b>
<I>
<mark>
<small>
<del>
<ins>
<sub>
<sup>
<s>
<u>
<be>
<pre>

by Luka Tatarishvili

HTML