DEV Community: Shrikant Dhayje

How to Add Google Ad Sense in Next.js 13 With App Router, Auto Ads and Unit Ads

Shrikant Dhayje — Thu, 22 Jun 2023 15:40:17 +0000

Hello everyone! Today, I'm going to talk about how to run Google AdSense and Google AdSense ad units.

The Problem

We can add the AdSense code in the head tag of a Next.js 13 app router, but the problem arises when dealing with Google AdSense ad units. When using the new method, we have to assign our ad component as a client, but the AdSense ad unit code does not refresh on page changes.

Solution 1: Auto Ads (Follow this for ad units as well)

Firstly, go to the RootLayout component, which looks like the following:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head></head>
      <body className="bg-gray-100 font-sans">{children}</body>
    </html>
  );
}

The Google AdSense code you need to convert is as follows:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin />

Now, convert the code to a Next.js Script component:

<Script
  async
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456"
  crossOrigin="anonymous"
  strategy="lazyOnload"
/>

Simply add this code to the head tag, and remember that the strategy should be set to lazyOnload, which increases the chances of the code running fine. Also, set crossOrigin to "anonymous".

Solution 2: Google AdSense Ad Unit Codes in App Router

Now, you have the code from the Google AdSense ad unit, which looks like this:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- Homepage Leaderboard -->
<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-1234567890123456" data-ad-slot="1234567890"></ins>
<script>
(window.adsbygoogle = window.adsbygoogle || []).push({});
</script>

The first part of the code (the first script tag) is already rendered in the head tag, as we added it in the auto ads solution. So, we will focus on the remaining code.

After converting it to the Next.js version, it looks like this:

<ins
  className="adsbygoogle"
  style={{ display: "inline-block", width: 728, height: 90 }}
  data-ad-client="ca-pub-1234567890123456"
  data-ad-slot={1234567890}
/>
<script dangerouslySetInnerHTML={{ __html: "(window.adsbygoogle = window.adsbygoogle || []).push({});" }} />

You can now add this code. However, there is an issue: the page needs to be refreshed for the ad to load, and it doesn't load again on other pages due to the smooth navigation of Next.js.

To resolve this, we need to update our code, which might seem complex but it works completely.

First, create a new AdCode.jsx file. Note: It should be in JSX format, not .ts.

First, add the following code in a class component (do not use a function component with useEffect() as it only works partially):

class AdCodeWithoutRouter extends React.Component {
  renderAds() {
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }

  componentDidMount() {
    this.renderAds();
  }

  componentDidUpdate(prevProps) {
    if (this.props.router.asPath !== prevProps.router.asPath) {
      this.renderAds();
    }
  }

  render() {
    return (
      <div className="container mx-auto text-center" aria-hidden={true}>
        <ins
          className="adsbygoogle"
          style={{ display: 'block', width: '100%' }}
          data-ad-client="ca-pub-1234567890"
          data-ad-slot="123456"
          data-ad-format="auto"
          data-full-width-responsive="true"
        ></ins>
      </div>
    );
  }
}

Next, you need to import some modules and modify the function component. The complete file will look like this. Make sure to import useRouter from 'next/navigation' in Next.js 13:

'use client';
import React from 'react';
import { useRouter } from 'next/navigation';

class AdCodeWithoutRouter extends React.Component {
  renderAds() {
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }

  componentDidMount() {
    this.renderAds();
  }

  componentDidUpdate(prevProps) {
    if (this.props.router.asPath !== prevProps.router.asPath) {
      this.renderAds();
    }
  }

  render() {
    return (
      <div className="container mx-auto text-center" aria-hidden={true}>
        <ins
          className="adsbygoogle"
          style={{ display: 'block', width: '100%' }}
          data-ad-client="ca-pub-1234567890"
          data-ad-slot="123456"
          data-ad-format="auto"
          data-full-width-responsive="true"
        ></ins>
        <script dangerouslySetInnerHTML={{ __html: '(window.adsbygoogle = window.adsbygoogle || []).push({});' }}></script>
      </div>
    );
  }
}

const AdCode = () => {
  const router = useRouter();
  return <AdCodeWithoutRouter router={router} />;
};

export default AdCode;

In the modified code, the componentDidMount function runs when the component is first loaded, and componentDidUpdate is triggered when navigating to new pages. These functions ensure that the ads are rendered correctly.

Finally, you can use the AdCode component wherever you need it.

Bye.

Please note that the above code assumes you are using Next.js version 13. Make sure to import the correct modules and follow the appropriate syntax based on your Next.js version.

MongoDB Error: couldn’t connect to server 127.0.0.1:27017 on Windows

Shrikant Dhayje — Tue, 14 Mar 2023 15:35:48 +0000

Problem

Error: couldn’t connect to server 127.0.0.1:27017 for MongoDB on Windows

This problem can occur if you install MongoDB without selecting the install as a service option or if you disable its auto start on startup.

Details

MongoDB made multiple projects to install, so it's confusing to install it for Windows users who only like to install programs via Installer. And this issue also occurs if you install the MongoDB server in the wrong manner.

Safest Installer But bigger in file size and app size installer is at MongoDB Community Server Download or

First Solution

For localhost or 127.0.0.1.

Search for Services in start search bar of windows and Start the Service named MongoDB or MongoDB Server (MongoDB) by Right Clicking and Clicking Start.

Second Solution

This is also for `localhosted

Install the appropriate MongoDB Stack or the more sophisticated MongoDB Community Server, the link to which I have given above. Either reinstall the complete software packages, such as MongoDB Compass and Mongosh Shell (MongoDB Shell (Mongosh) is distinct from Atlas Shell).

Third Solution

Use Third Party or Opensource Admin Panel of MongoDB. I am not promoting any software at all and can't list all but these are some which are mostly free software to use.

Appsmith ( Opensource Easiest if using docker under Linux Container)
Retool ( Proprietary with Free Trial )
UI Bakery
Budibase
Tooljet ( Opensource, but does not automatically adds field name for table columns )

bye 👋.

How to Merge Multiple Data frames with same columns In Pandas | Python

Shrikant Dhayje — Wed, 11 Jan 2023 14:19:05 +0000

Hello Everybody, So Today I just faced this issue of merging multiple excels in one and there size was too big for merging like more 100 MB for Size and In Some Cases the size spans more and if we tried to search any online tool they mostly have size limit for merging the excel files with same columns.

I Know there is pd.merge function but I like simple.

So I Just Decided to merge my file as given below.

So My Code Is in Jupyter Notebook and I am Pasting it's Markdown version as given below.

Firstly we will need to Import pandas and glob package

pandas for dataframe and glob for getting the list of all files in whatever folder that we want

import pandas as pd
from glob import glob

Get List file all file names in a variable named `list_of_all_files` like given below

list_of_all_files = glob(r'B:\dev\test_folder\*.xlsx')
list_of_all_files

    ['B:\\dev\\test_folder\\test.xlsx',
     'B:\\dev\\test_folder\\test2.xlsx',
     'B:\\dev\\test_folder\\test3.xlsx',
     'B:\\dev\\test_folder\\test4.xlsx',
     'B:\\dev\\test_folder\\test5.xlsx']

Read Each and Every file and get list of Pandas Dataframes

all_dfs = [pd.read_excel(file, 'Sheet1') for file in list_of_all_files]
all_dfs


    [                       Name of the Establishment  \
     0                M/S, RASHAONTHA AIRCONDITIONERS   
     1                 Micro Plastics Private Limited   
     2                           RBL FINSERVE LIMITED   
     3                                RAM ENTERPRISES   
     4   S3 GROUP INDIA LIMITED LIABILITY PARTNERSHIP   
     5                                        ADGROWW   
     6         LOKADITYA PROPERTIES AND CONSTRUCTIONS   
     7                           JAI AMBE ENTERPRISES   
     8                                AARTHA THAI SPA   
     9                   D N NANDI EXCELLENT SERVICES   
     10                    YULU BIKES PRIVATE LIMITED   
     11                                      MIG CAFE   
     12                     VNF IDEAS PRIVATE LIMITED   
     13                     VNF IDEAS PRIVATE LIMITED   
     14                        Prasanna N Rajapurohit   
     15                            SILVERLINE CLINICS   
     16                KALYANI AURA WORKSPACE PVT LTD   

                          Name of the Employer.  \
     0                 Mr.LOKESH G, Mr.LOKESH G   
     1                          VIJENDRA BABU N   
     2                     VIKAS UPENDRA MUTTOO   
     3                                  S MEERA   
     4                          KRISHNAMURTHY M   
     5                               DEEPAK P R   
     6                                HEMANTH K   
     7                   MEHERNOSH NOSHIR PATEL   
     8                              ROSE MARY G   
     9                        Dileep Kumara K S   
     10                          Naveen Dachuri   
     11                  Malleshwar Rao Dhavili   
     12                              Atul Kumar   
     13                              Atul Kumar   
     14                  Prasanna N Rajapurohit   
     15  KANAJENAHALLI NARAYANAPPA SATHISH BABU   
     16                            A MOHAN RAJU   

     ...  

                                        Nature of Business  
     0   Coaching Centre-Student counselling for overse...  
     1                                        SUPER MARKET  
     2   Technical and Professional Skill Development a...  
     3                               INTERIOR AND WOODWORK  
     4       Learning and Activity Centre For Special Kids  
     5           Family Office and Trust Planning Services  
     6   Handloom Cloth, Mill Goods, Hosieries, Dress M...  
     7   Web Development Web Designing Services And Pro...  
     8          Security/House keeping and Allied Services  
     9                                Software Development  
     10                 Mangoes and Mango products Trading  
     11                                    RESTAURANT,CAFE  
     12      Selling Fruits, Vegetables and Dairy Products  
     13      Selling Fruits,Vegetables and Dairy products.  
     14                 Works Contract for Government work  
     15                                   Medical Hospital  
     16                 Commercial & Office Space Provider  ,
                              Name of the Establishment  \
     0                                KLAYWORKZ BARISTA   
     1                      DWIJA FOODS PRIVATE LIMITED   
     2   M/s INNATERA NANOSYSTEMS INDIA PRIVATE LIMITED   
     3                                  PARISHIKA GROUP   
     4          FOURDEGREEWATER CAPITAL PRIVATE LIMITED   
     5                                       RAYSUN LED   
     6             FORETHOUGHT VENTURES PRIVATE LIMITED   
     7        REVENUESTACK TECHNOLOGIES PRIVATE LIMITED   
     8            CODELINEAR SOFTWARE SOLUTIONS PVT LTD   
     9                             M/S VAISHNAVI INCORP   
     10                                 DINERO VENTURES   
     11                              GENESIS PHOTOBOOKS   
     12               M/s KNOWSPRING FINANCIAL ADVISORS   
     13                         M/S ICL FINCORP LIMITED   
     14  VATSALA CONSTRUCTIONS AND CONSULTANTS PVT.LTD.   

                                     Name of the Employer.  \
     0                                              SAMPAT   
     1   JAYATI DIBAKAR CHATTERJEE, DIBAKAR SATYABRATA ...   
     2                                    Sri S Uma Mahesh   
     3                           Chandan Nagaraj, Jeevitha   
     4   Anshul Gupta, Ajinkya Mukund Kulkarni, Abhik J...   
     5                                           PRAKASH M   
     6    DOMMASANDRA MALLIKARJUNA GOWRI SHANKAR, NACHAPPA   
     7                          YESHU SINGH, SANDEEP SINGH   
     8                       Syed Muheeb, Muheeb Syed Saif   
     9                               Mr M K Harshith Kumar   
     10                        GRISHMA RAMANA PRASAD REDDY   
     11                                          A C AKASH   
     12                                 Monika Prabhakaran   
     13                                 SRI. KG ANIL KUMAR   
     14                                     H S Vishwanath   

                                        Nature of Business  
     0                                   Hotel/ Restaurant  
     1                           Beverage Vending Services  
     2                           IT Design and Development  
     3                                  Bar and Restaurant  
     4   Commercial Establishment engaged in business o...  
     5           LED LIGHTS MANUFACTURING TRADING SERVICES  
     6                               HOTEL AND RESTAURANTS  
     7   all related services and consultancy services ...  
     8   Designing, Developing, Maintaining Website and...  
     9   Manpower Consultancy,Staffing, Security, House...  
     10                               Consultancy Services  
     11          Printing and Printing Systems, and Others  
     12                              PROFESSIONAL SERVICES  
     13                                          GOLD LOAN  
     14                       Construction and Civil works  ]

They are not visible like table because they are not merged given below is visualization of first data frame.

all_dfs[0]

	Name of the Establishment	Name of the Employer.	Nature of Business
0	M/S, RASHAONTHA AIRCONDITIONERS	Mr.LOKESH G, Mr.LOKESH G	Sales and Service of Airconditioners
1	Micro Plastics Private Limited	VIJENDRA BABU N	Corporate Office
2	RBL FINSERVE LIMITED	VIKAS UPENDRA MUTTOO	Business Correspondent
3	RAM ENTERPRISES	S MEERA	PACKAGING METERIAL TRADING SERVICES
4	S3 GROUP INDIA LIMITED LIABILITY PARTNERSHIP	KRISHNAMURTHY M	IT SOLUTIONS
5	ADGROWW	DEEPAK P R	B P O SERVICES
6	LOKADITYA PROPERTIES AND CONSTRUCTIONS	HEMANTH K	CONSTRUCTIONS
7	JAI AMBE ENTERPRISES	MEHERNOSH NOSHIR PATEL	SECURITY AND HOUSE KEEPING MANPOWER SERVICES
8	AARTHA THAI SPA	ROSE MARY G	SPA AND SALOON
9	D N NANDI EXCELLENT SERVICES	Dileep Kumara K S	House Keeping And Sump Cleaning
10	YULU BIKES PRIVATE LIMITED	Naveen Dachuri	EV Battery Charging & Swapping
11	MIG CAFE	Malleshwar Rao Dhavili	RESTAURANT,CAFE
12	VNF IDEAS PRIVATE LIMITED	Atul Kumar	Selling Fruits, Vegetables and Dairy Products
13	VNF IDEAS PRIVATE LIMITED	Atul Kumar	Selling Fruits,Vegetables and Dairy products.
14	Prasanna N Rajapurohit	Prasanna N Rajapurohit	Works Contract for Government work
15	SILVERLINE CLINICS	KANAJENAHALLI NARAYANAPPA SATHISH BABU	Medical Hospital
16	KALYANI AURA WORKSPACE PVT LTD	A MOHAN RAJU	Commercial & Office Space Provider

Now we are gonna merge all data frames in one, like given below

Be Aware that at given below line of code the ignore_index=True is mandatory because the index column can be duplicate for each file and may overwrite instead of merging all df into one.

single_merged_df = pd.concat(all_dfs, ignore_index=True)
single_merged_df

	Name of the Establishment	Name of the Employer.	Nature of Business
0	M/S, RASHAONTHA AIRCONDITIONERS	Mr.LOKESH G, Mr.LOKESH G	Sales and Service of Airconditioners
1	Micro Plastics Private Limited	VIJENDRA BABU N	Corporate Office
2	RBL FINSERVE LIMITED	VIKAS UPENDRA MUTTOO	Business Correspondent
3	RAM ENTERPRISES	S MEERA	PACKAGING METERIAL TRADING SERVICES
4	S3 GROUP INDIA LIMITED LIABILITY PARTNERSHIP	KRISHNAMURTHY M	IT SOLUTIONS
...	...	...	...
77	DINERO VENTURES	GRISHMA RAMANA PRASAD REDDY	Consultancy Services
78	GENESIS PHOTOBOOKS	A C AKASH	Printing and Printing Systems, and Others
79	M/s KNOWSPRING FINANCIAL ADVISORS	Monika Prabhakaran	PROFESSIONAL SERVICES
80	M/S ICL FINCORP LIMITED	SRI. KG ANIL KUMAR	GOLD LOAN
81	VATSALA CONSTRUCTIONS AND CONSULTANTS PVT.LTD.	H S Vishwanath	Construction and Civil works

82 rows × 3 columns

As you can see like above code you can merge multiple data frame into one. and now just export your data frame in whatever format you want like csv, xlsx or anything else.

How to work with Python's normal venv and pipenv simultaneously

Shrikant Dhayje — Sat, 15 Oct 2022 15:17:40 +0000

Why Need to solve this issue.

So I Just Want to Use pipenv but do not want my venv folder to built in my automatically decided location and also want to use pipenv automatically building the requirements list.

So For Resolving this issue I build a method of how to do that.

Straight to the Point The Steps are given below.

Create Virtual Environment normally with `venv` module

For Windows



py -3 -m venv venv_folder

For Linux or Mac Operating System



python -m venv venv_folder



python3 -m venv venv_folder

Activate the manually created virtual environment folder

For Windows



# for windows powershell
./venv_folder/Scripts/Activate.ps1

# for windows cmd
./venv_folder/Scripts/activate.bat

# for windows with posix shell like git bash cli
source venv_folder/Scripts/activate

For Linux Based operating system or MacOS



source venv_folder/bin/activate

if you have any issues activating the venv please refer below post

How to create and Activate the Virtual Environment for Python3 project.

Shrikant Dhayje ・ Jan 19 '22

#python #virtualenv #shriekdj #codewithshriekdj

Python venv or virtualenv won't activate on windows Powershell

Shrikant Dhayje ・ Jan 18 '22

#python #windows #virtualenv #shriekdj

Install pipenv twice

Install the pipenv like given below



pip install pipenv

pipenv install pipenv

Courtesy Notice: Pipenv found itself running within a virtual environment, so it will automatically use that environment, instead of creating its own for any project. You can set PIPENV_IGNORE_VIRTUALENVS=1 to force pipenv to ignore that environment and create its own instead. You can set PIPENV_VERBOSITY=-1 to suppress this warning.

Installing pipenv...

...

Now install packages with pipenv as normal

You will now have pipenv and venv_folder both at the same time to run it.

Get user location from browser using JavaScript | Solutions By ShriekDj

Shrikant Dhayje — Thu, 15 Sep 2022 15:58:17 +0000

So today i am gonna share you some code and details about how to ask the customer there own location and submit in a form using Geolocation API of Web Browser Using JavaScript.

But Before Copying and Pasting the Code Be Aware this feature only work on https protocol not http, but weirdly able to run on localhost.

1. Create an HTML Boilerplate

The HTML Boilerplate Given below.

<!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.0">
    <title>Geolocation Form</title>
</head>
<body>
    Hello World
</body>
</html>

2. Create and Form in the body

We will get user location in latitude and longitude format like given below.

<form action="submit_location" method="post">
    <input type="number" name="lat" id="latitude" required>
    <input type="number" name="long" id="longitude" required>

    <label for="user_data">Add User Data</label><br>
    <input type="text" id="user_data" name="user_data" required>

    <button type="submit" value="submit">Submit The Data</button>
</form>

3. Make Latitude and Longitude hidden.

For many times user don't want to see or don't need at all to see the latitude and longitude in front of them. for that case. change the form as follows.

<form action="submit_location" method="post">
    <input type="hidden" name="latitude" id="lat" required>
    <input type="hidden" name="longitude" id="long" required>

    <label for="user_data">Add User Data</label><br>
    <input type="text" id="user_data" name="user_data" required>

    <button type="submit" value="submit">Submit The Data</button>
</form>

3. Create JavaScript Function to Ask Customer for there location and register it.

Given Below Code Contains 3 Types of logic to run as per client interaction.

function myFunction() {
    // this will be called when my function is needed
    console.log('location captured');
}

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, removeForm);
        if ((lat.getAttribute('value') == null) || (long.getAttribute('value') == null)) {

            // code to run if cs disagrees to share the location
            // x.innerHTML = "Form Can't be uploaded Until you provide your current location";
        }

    } else {

        // if client browser does not supports geolocation at all
        // x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    // code to run if cs agrees to share the location
    // x.innerHTML = "Now You Can Submit the Form";
    lat.setAttribute('value', position.coords.latitude);
    long.setAttribute('value', position.coords.longitude);
}

4. Lastly Run the all script function on full page load.

Given Below is code is used when we want to run a function when the page is loaded.

We can directly write function but in some browsers it does not work so we have to run the function in below manner.

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
    getLocation();
});

5. Complete HTML Code Given Below.

<!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.0">
    <title>Geolocation Form</title>
</head>

<body>
    <form action="submit_location" method="post">
        <input type="hidden" name="latitude" id="lat" required>
        <input type="hidden" name="longitude" id="long" required>

        <label for="user_data">Add User Data</label><br>
        <input type="text" id="user_data" name="user_data" required>

        <button type="submit" value="submit">Submit The Data</button>

        <script>
            function myFunction() {
                // this will be called when my function is needed
                console.log('location captured');
            }

            function getLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showPosition, myFunction);
                    if ((lat.getAttribute('value') == null) || (long.getAttribute('value') == null)) {

                        // code to run if cs disagrees to share the location
                        // x.innerHTML = "Form Can't be uploaded Until you provide your current location";
                    }

                } else {

                    // if client browser does not supports geolocation at all
                    // x.innerHTML = "Geolocation is not supported by this browser.";
                }
            }

            function showPosition(position) {
                // code to run if cs agrees to share the location
                // x.innerHTML = "Now You Can Submit the Form";
                lat.setAttribute('value', position.coords.latitude);
                long.setAttribute('value', position.coords.longitude);
            }

            window.addEventListener('DOMContentLoaded', (event) => {
                console.log('DOM fully loaded and parsed');
                getLocation();
            });
        </script>
    </form>
</body>

</html>

6. Screenshots of How The Form and location notification Looks on Firefox

Location Asked Screenshot

Location Captured Screenshot

Creating HTML Template And Views | Django CMS Building By shriekdj

Shrikant Dhayje — Thu, 25 Aug 2022 14:30:12 +0000

In This Post I Will Create Html Pages for the site and as well as show how to use urls.py and views.py.

First Create a folder named templates in blog app in django app and add update the variable in django_project_name/setting.py like given below

import os # add it at the top of settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')], # at here add templates folder
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Create an index.html in it like given below

<!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.0">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Now goto file blog/views.py and create a new function like below to load our index.html you can give whatever name you wanted.

from django.shortcuts import render

# Create your views here.
def index(request):
    return render(request, 'index.html')

Here we are rendering our index page with function named index. it's not mandatory to give the same name as file name but it's just helps you remember the locations. at above function we are giving parameter request it is for getting the data from our client browser and we as Server write logic at in this function.

We Also Need 2 More Steps to view this page.

First Create urls.py in blog folder and write below code.

from django.urls import path
from blog import views

urlpatterns = [
    path('', views.index)
]

at here we are loading all the urls in urlpatterns variable and blank path means that it's at homepage of blog app.

And At Last At the django_project/urls.py we need to make some modifications. Watch Clearly Both Are same file name but different Folder. This urls.py is Main url routing file of whole site. change it like given below

from django.contrib import admin
from django.urls import include ,path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blog.urls'))
]

At here we have to Add Global Paths of Site with Special include function. directly adding similar to admin will not work. now load the site with python ./src/manage.py runserver screenshot given below.

if you see this clearly i did not use relative import it may raises some error in production mode in future and i have to manually update all relative import to absolute import.

But I Will Mostly Use Class Based Views Instead of Function Based so I will Change My index function in `views.py as follows.

`python
from django.shortcuts import render
from django.views import View

Create your views here.

class IndexView(View):

def get(self, request, *args, **kwargs):
    return render(request, 'index.html')

Here all the logic of the code get into get method the views class and also change urlpatterns under blog/urls.py as follows below.

`python
from django.urls import path
from blog import views

urlpatterns = [
path('', views.IndexView.as_view(), name='index_view'),
]
`

It will not change look of the page at all as of now but in future we can use inheritance like features with it.

In Class View The get method means GET Request and obviously it have other request methods like ['get', 'post', 'put', 'patch', 'delete', 'head', 'options', 'trace']

and as_view() method will return the response as per request method in one class.

Chaging View Again

`python
from django.views.generic.base import TemplateView

Create your views here.

class IndexView(TemplateView):

template_name: str = 'index.html'

# def get(self, request, *args, **kwargs):
#   return render(request, 'index.html')

you can seet the code it reduced if we are returning the render function.

Actually views function have the specific way of returning pages like given below.

python def my_view_function(request): context_to_send_html= {"data sent to our template": "some-data" } return render(request, 'template_file_name.html', context_to_send_html)

To Make It Easily Writable We Write Class Based View. as of now it look to difficult but it will save too much of our time in future.

As always the given below is GitHub Repository URL.

shriekdj / shriekdj_cms

shriekdj_cms build in django

View on GitHub

Creating Custom Profile and Tag | Django CMS Building By shriekdj

Shrikant Dhayje — Tue, 23 Aug 2022 15:00:00 +0000

So Now I am Trying to Create 2 New Models for the CMS Which Are User Profile and Blog Tags but before That I Want to Say Some Reconfiguration Made By In The GitHub Repository During The Series.

I Just Renamed The Django Project from dj_admin to config because that should be correct to understand and run the project and Also I removed The save() method of the Post Model, slug field of the Post Model and random_words() function because it was creating some errors while migrating the project.

So Now The Post Model of the Django Looks Like This Now

# Create your models here.
class Post(models.Model):
    id = models.BigAutoField(primary_key=True)
    title = models.CharField(verbose_name='title', max_length=255, null=False)
    content = models.TextField(verbose_name='content', null=False, blank=True)
    created_at = models.DateTimeField(verbose_name='created_at',auto_now=True, auto_created=True, null=False, blank=False)
    published_at = models.DateTimeField(verbose_name='published_at',null=True)
    updated_at = models.DateTimeField(verbose_name='updated_at',null=True)
    slug = models.SlugField(verbose_name='slug', max_length=50, unique=True)

After Creating The Blog Post Model We Should Need an Author / User Profile Model is Needed and Know That This Model Should Be Upside of the Post Model.

For Creating the User Profile We will import Auth User Model of the Django With one-to-one field for using in our blog write below code Upside of the Post Model.

from django.conf import settings
class Profile(models.Model):
    user = models.OneToOneField(
        settings.AUTH_USER_MODEL,
        on_delete=models.PROTECT,
    )
    website = models.URLField(blank=True)
    bio = models.CharField(max_length=240, blank=True)

    def __str__(self):
        return self.user.get_username()

Here I added on_delete=models.PROTECT to prevent deletion of the Profile.

Also Added Tag Model To the blog App between Profile Model and Post Model.

class Tag(models.Model):
    name = models.CharField(max_length=50, unique=True, null=False)
    slug = models.SlugField(verbose_name='slug', max_length=50, unique=True)

    def __str__(self) -> str:
        return self.name

I Also Added Some New Fields to the Post Model named as subtitle, meta_description, is_published as well as added author as Foreign-Key ( we consider only one author to an post ) and tags as Many to Many Because Many Post Can Have Tags And Vice Versa.

After Updating the Post Model It Looks Like Given Below

# Create your models here.
class Post(models.Model):
    id = models.BigAutoField(primary_key=True)
    title = models.CharField(verbose_name='title', max_length=255, null=False)
    subtitle = models.CharField(max_length=255, blank=True)
    content = models.TextField(verbose_name='content', null=False, blank=True)
    meta_description = models.CharField(max_length=150, blank=True)
    created_at = models.DateTimeField(verbose_name='created_at',auto_now=True, auto_created=True, null=False, blank=False)
    updated_at = models.DateTimeField(verbose_name='updated_at',null=True)
    published_at = models.DateTimeField(verbose_name='published_at',null=True, blank=True)
    is_published = models.BooleanField(verbose_name='is_published', default=False)
    slug = models.SlugField(verbose_name='slug', max_length=50, unique=True)

    author = models.ForeignKey(Profile, on_delete=models.PROTECT, default=None)
    tags = models.ManyToManyField(Tag, blank=True)

We Also Need to Update admin.py in blog to like given below.

from django.contrib import admin

# Register your models here.
from blog.models import Profile, Post, Tag

@admin.register(Profile)
class ProfileAdmin(admin.ModelAdmin):
    model = Profile

@admin.register(Tag)
class TagAdmin(admin.ModelAdmin):
    model = Tag

@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
    model = Post

    list_display = (
        "id",
        "title",
        "subtitle",
        "slug",
        "published_at",
        "is_published",
    )
    list_filter = (
        "is_published",
        "published_at",
    )
    list_editable = (
        "title",
        "subtitle",
        "slug",
        "published_at",
        "is_published",
    )
    search_fields = (
        "title",
        "subtitle",
        "slug",
        "body",
    )
    prepopulated_fields = {
        "slug": (
            "title",
            "subtitle",
        )
    }
    date_hierarchy = "published_at"
    save_on_top = True

Also Screenshot Below of the add post in admin panel

Here is Below Link to My GitHub Repo

shriekdj / shriekdj_cms

shriekdj_cms build in django

View on GitHub

Customizing Slug Field for Post Model | Django CMS Building By shriekdj

Shrikant Dhayje — Sat, 13 Aug 2022 12:30:00 +0000

So In Previous Post I Created The Simple Django Model of the BlogPost Which Stores Data Like Given Below.



class Post(models.Model):
    title = models.CharField(verbose_name='title', max_length=255, null=False)
    content = models.TextField(verbose_name='content', null=False, blank=True)
    created_on = models.DateTimeField(auto_now=True, auto_created=True, null=False, blank=False)
    published_on = models.DateTimeField(null=True)
    updated_on = models.DateTimeField(null=True)

But It does Not have any slug field so I am Adding them it will be like given below



from typing import Iterable, Optional
from django.db import models

# Create your models here.
class Post(models.Model):
    title = models.CharField(verbose_name='title', max_length=255, null=False)
    content = models.TextField(verbose_name='content', null=False, blank=True)
    created_on = models.DateTimeField(auto_now=True, auto_created=True, null=False, blank=False)
    published_on = models.DateTimeField(null=True)
    updated_on = models.DateTimeField(null=True)
    slug = models.SlugField(verbose_name='slug', max_length=255, unique=True)

    def save(self, force_insert: bool = ..., force_update: bool = ..., using: Optional[str] = ..., update_fields: Optional[Iterable[str]] = ...) -> None:
        return super().save(force_insert, force_update, using, update_fields)

Here there is also a new method is added here. don't worry you don't have to remember it as it is just type def save under the model in your code editor and it auto fill the save() method of models.Model Base Class Also from typing import Iterable, Optional for working with optional values.

There is Function Named slugify() in Built-in module of django django.utils.text just import it and modify the last one save() method like given below.



    def save(self, *args, **kwargs):
        if not self.slug:
            self.slug = slugify(self.title)
        super(Post, self).save(*args, **kwargs)

Now This may make our slug easily but it will have issues like we can't create Posts with same title so we will add new function here.



import random
from typing import Iterable, Optional
from django.db import models
from django.utils.text import slugify

def random_words():
    return ''.join(random.choice('abcdefghijklmnopqrstuvwxyz0123456789'.split('')) for _ in range(6))

# Create your models here.
class Post(models.Model):
    title = models.CharField(verbose_name='title', max_length=255, null=False)
    content = models.TextField(verbose_name='content', null=False, blank=True)
    created_on = models.DateTimeField(auto_now=True, auto_created=True, null=False, blank=False)
    published_on = models.DateTimeField(null=True)
    updated_on = models.DateTimeField(null=True)
    slug = models.SlugField(verbose_name='slug', max_length=255, unique=True)

    def save(self, *args, **kwargs):
        if not self.slug:
            self.slug = slugify(self.title + random_words())
        super(Post, self).save(*args, **kwargs)

here we added random module and random_words() functions for auto creating slug if not informed.

Also register that model in admin.py of the blog app folder like given below



from django.contrib import admin

# Register your models here.
from .models import Post

admin.site.register(Post)

Resultant Creation Form Will Look Like Given Below After migrating the Database.

Link to the Repo

shriekdj / shriekdj_cms

shriekdj_cms build in django

View on GitHub

Conclusion

If you found this useful then please share this and follow me! Also check out Buy Me A Coffee if you want to support me on a new level!

Creating Custom CMS In Django | Django CMS Building By shriekdj

Shrikant Dhayje — Wed, 10 Aug 2022 11:47:00 +0000

So I Thought about creating the Custom CMS and Update it's feature day by day as per need.

For Example Firstly I just added blog app in django project named dj_admin.
And Created Very Simple Model LIke

from django.db import models

# Create your models here.
class Post(models.Model):
    title = models.CharField(verbose_name='title', max_length=255, null=False)
    content = models.TextField(verbose_name='content', null=False, blank=True)

after some time I added 3 fields like created_at, published_at and updated_at where created_at is mandatory and auto created Model Then updated like this.

from django.db import models

# Create your models here.
class Post(models.Model):
    title = models.CharField(verbose_name='title', max_length=255, null=False)
    content = models.TextField(verbose_name='content', null=False, blank=True)
    created_on = models.DateTimeField(auto_now=True, auto_created=True, null=False, blank=False)
    published_on = models.DateTimeField(null=True)
    updated_on = models.DateTimeField(null=True)

I Created The GitHub Repo for the Project And It's Django Project Code Will Be Under src directory.

shriekdj / shriekdj_cms

shriekdj_cms build in django

View on GitHub

I will be adding features to it day by day to make it blog.

I Published the Python Package on PyPi : pip install google-address-to-latlong-csv

Shrikant Dhayje — Thu, 30 Jun 2022 13:59:00 +0000

So today I Published an python package first time in my life.

Now This is a Python 3 Package which gets the list of data of addresses from an csv file and gives an output as csv with additional fields of latitude and longitude of the address provided by google GeoCoding API.

I Created this Package With very simple program of Poetry.

So Now Poetry is an Virtual Environment Manager Just Like Pipenv or Virtual Env But with It's Own Way of creating wheel for our Project and also it helps us to publish the package.

How to Publish a Python package with help of poetry

Make your project in a folder with __init__.py file and goto parent of that package_name_folder
run poetry build
run poetry publish
It will ask credentials of pypi.org so fill it and your package published

shriekdj / google_address_to_latlong_csv

This is an Python 3 Program which gets the list of data of addresses from an csv file and gives an output as csv with additional fields of latitude and longitude of the address provided by google GeoCoding API.

google_address_to_latlong_csv

What it does

This is a Python 3 Package which gets the list of data of addresses from an csv file and gives an output as csv with additional fields of latitude and longitude of the address provided by google GeoCoding API.

Requirements

Python 3 Installed
Have Google API Key of Google GeoCoding API You can get it from Google Cloud Console

Same Package for venv, pipenv and poetry

Sample Input CSV File

Goto CSV File Link

ID	Address
1	Nehru Nagar, Pimpri, Pune, Opp Sheetal Hotel, Pune, 411018
2	Rahatani Main Road, Rahatani, Pune, Near Baliraj Garden, Pune, 411017
3	Chinchwad East, Pune, Near Thermax Chowk, Pune, 411019
4	Tapavan Road, Pimpri Gaon-Pimpri, Pune, Near Tapavan, Pune, 411018
5	Chinchwad, Pune, Near Post Office Chaphekar Chowk, Pune, 411033
6	Pune, Maharashtra, India, Pune, 411038
7	New Sanghvi Rd, Sangavi, Pune, Near Famous Chowk, Pune, 411027
8	Moshi, Pune,

…

View on GitHub

you can install the package by running

pip install google-address-to-latlong-csv

pip install google-address-to-latlong-csv

I Know I Am writing this post after too much time, because i actually didn't have that many article topics so i just didn't published some unnecessary stuffs. But I Have Now some topics to cover so just wait for it.

Thanks bye, 👋

Creating an Website or Webapp in Django Web Framework

Shrikant Dhayje — Tue, 19 Apr 2022 13:09:00 +0000

Preface

This Post Will Be Part of HashNode's Writeathon and also part of My Django Related Posts.

So there are many ways to write Back-end for an Web App or Website but we can also write an Web App with Python 3 Programming Language and Django Is One of them.

It's an Free and Open-source Project Created by Django Project Foundation.

Creating An Development Environment for running a Django Project

For Running an Django Project We Will Need Some Prerequisites like In Our Operating System We Need Python 3.8 or Above Installed.

Installing `python-venv`

Mostly the venv module of python is already installed but it's not installed in Most Cases.

So We Can Install the venv module by our system package-manager.

Like Below is for Ubuntu

sudo apt-get install python-venv

And For Windows it Is installed with Python Exe.

Creating the Virtual Environment

The given below code will create an virtual environment in new directory named venv

# if only python3 is on system
python -m venv venv

# if multiple python versions are installed on system
python3 -m venv venv

Activating the Python Virtual Environment

Given Below is an Chart about how to activate an virtual environment in that Operating System.

Platform	Shell	Command to activate virtual environment
POSIX	bash/zsh	`$ source <venv>/bin/activate`
	fish	`$ source <venv>/bin/activate.fish`
	csh/tcsh	`$ source <venv>/bin/activate.csh`
	Power-Shell Core	`$ <venv>/bin/Activate.ps1`
Windows	cmd.exe	`C:\> <venv>\Scripts\activate.bat`
	Power-Shell	`PS C:\> <venv>\Scripts\Activate.ps1`

Installing Django

You Can Simply install Django In your virtual environment by running below any pip command.

python3 -m pip install Django

# or just python
python -m venv pip install Django

# Directly pip or pip3

pip install Django
pip3 install Django

It will also install automatically an package named django-admin in our virtualenv.

Creating and Starting First Project In Django

Open Your Command Shell with virtual environment and Run Below Command.

For Creating Project Under New Folder of current folder Named `django_project`

django-admin startproject django_project

This Will Create an Folder Structure Below.

current_folder/

django_project/

django_project/

__init__.py

asgi.py

settings.py

urls.py

views.py

wsgi.py

manage.py

Whenever you create an Django project be aware it rejects the project name with - hyphen symbols so use _ instead.

For Creating Project Directly under Current Directory

django-admin startproject django_project .

We add an extra argument of path where to create project, here . dot symbol is used for current directory of relative path.

It will create an different folder structure like given below.

current_folder/

django_project/

__init__.py

asgi.py

settings.py

urls.py

views.py

wsgi.py

manage.py

Running Django Server on Local host

Now we can run our Django project directly with given below command, but be aware this command are for development environment only.

python manage.py runserver

Given command will run server and you just have to open http://localhost:8000 or http://127.0.0.1:8000 on your browser.

Given Below is an image of the Django Project Running.

If any issues occurred check out this posts.

How to create and Activate the Virtual Environment for Python3 project.

Shrikant Dhayje ・ Jan 19 '22

#python #virtualenv #shriekdj #codewithshriekdj

Python venv or virtualenv won't activate on windows Powershell

Shrikant Dhayje ・ Jan 18 '22

#python #windows #virtualenv #shriekdj

Django Posts Announcement

Shrikant Dhayje ・ Jan 17 '22

#django #python #webdev #shriekdj

Conclusion

If you found this useful then please share this and follow me! Also check out Buy Me A Coffee if you want to support me on a new level!

Thanks for reading until now.

Bye 👋.

PHP Related Small Tips for Improving the Speed of Writing Program

Shrikant Dhayje — Mon, 18 Apr 2022 15:32:26 +0000

Preface

In this article you will learn about the shortcuts and things to notice while writing PHP Code

Also PHP Should Be Already Installed on your PC, Device, Server, Sandbox or Virtual Machine ( Whatever You are using Maybe Toaster Also 😅 Don't Know What will Be Machine ).

The Given Post is about PHP 8 and Above.

PHP Code is created under an HTML Template. Actually PHP is Used like additional element of HTML.

PHP Oneliner echo Function Shortcut

So while writing some code like <?php echo "Hello World" ?> oneliner code we can use shortcut like below.

<div>
This PHP One Line Code
<?php echo "Hello World" ?>

And This One Line PHP Code are similar.
<?= "Hello World" ?>
and Also Shows the same result
</div>

This shortcut is only for echo function not for any other functions.

PHP running as alone

Just if your learning only the PHP, then for starters there is no need of installing or using apache, mysql, phpmyadmin directly from start you can still learn starting concepts without them.

Given Below is the Command for starting Built-in server of php in Command-line is given below.

php index.php -S 127.0.0.1:8000 -t .

For Online Code Editor Ide It is 0.0.0.0:8000 for using instead of localhost:8000.

While ending the PHP File No Need to add last `?>` in some Situations

If your code does not have any data related to html after the PHP Closing Tag At Last then also don't add the ?> tag of php.

Reason Maybe Like you maybe not always maybe you will have issues while importing one php file with ?> at to another then the another php file will expect no end tag at last of php.

For Example Given Below.

first.php

<?php echo "Hello World" ?>

if we tried to import this file in another file like given below

other.php

<div>
<?php
require_once("./first.php");

echo "This part will not parse as php code";
?>
And In Some OS it shows errors

here when we import first.php our php code part of second.php will close while importing and program below that will have some issues while running.

Conclusion

If you found this useful then please share this and follow me! Also check out Buy Me A Coffee if you want to support me on a new level!

Cover Image Credits

The Given Image is Provided by Ben Griffiths on Unsplash.

Image Available at https://unsplash.com/photos/2Rd-hwT2xQ0

Thanks for reading untill now.

Bye 👋.

DEV Community: Shrikant Dhayje

How to Add Google Ad Sense in Next.js 13 With App Router, Auto Ads and Unit Ads

The Problem

Solution 1: Auto Ads (Follow this for ad units as well)

Solution 2: Google AdSense Ad Unit Codes in App Router

MongoDB Error: couldn’t connect to server 127.0.0.1:27017 on Windows

Problem

Details

First Solution

Second Solution

Third Solution

How to Merge Multiple Data frames with same columns In Pandas | Python

Firstly we will need to Import pandas and glob package

Get List file all file names in a variable named list_of_all_files like given below

Read Each and Every file and get list of Pandas Dataframes

Now we are gonna merge all data frames in one, like given below

How to work with Python's normal venv and pipenv simultaneously

Why Need to solve this issue.

Create Virtual Environment normally with venv module

For Windows

For Linux or Mac Operating System

Activate the manually created virtual environment folder

For Windows

For Linux Based operating system or MacOS

How to create and Activate the Virtual Environment for Python3 project.

Shrikant Dhayje ・ Jan 19 '22

Python venv or virtualenv won't activate on windows Powershell

Shrikant Dhayje ・ Jan 18 '22

Install pipenv twice

Now install packages with pipenv as normal

Get user location from browser using JavaScript | Solutions By ShriekDj

1. Create an HTML Boilerplate

2. Create and Form in the body

3. Make Latitude and Longitude hidden.

3. Create JavaScript Function to Ask Customer for there location and register it.

4. Lastly Run the all script function on full page load.

5. Complete HTML Code Given Below.

6. Screenshots of How The Form and location notification Looks on Firefox

Location Asked Screenshot

Location Captured Screenshot

Creating HTML Template And Views | Django CMS Building By shriekdj

Create your views here.

Create your views here.

shriekdj / shriekdj_cms

shriekdj_cms build in django

Creating Custom Profile and Tag | Django CMS Building By shriekdj

shriekdj / shriekdj_cms

shriekdj_cms build in django

Customizing Slug Field for Post Model | Django CMS Building By shriekdj

shriekdj / shriekdj_cms

shriekdj_cms build in django

Conclusion

Creating Custom CMS In Django | Django CMS Building By shriekdj

shriekdj / shriekdj_cms

shriekdj_cms build in django

I Published the Python Package on PyPi : pip install google-address-to-latlong-csv

shriekdj / google_address_to_latlong_csv

This is an Python 3 Program which gets the list of data of addresses from an csv file and gives an output as csv with additional fields of latitude and longitude of the address provided by google GeoCoding API.

google_address_to_latlong_csv

What it does

Requirements

Same Package for venv, pipenv and poetry

Sample Input CSV File

Creating an Website or Webapp in Django Web Framework

Preface

Creating An Development Environment for running a Django Project

Installing python-venv

Creating the Virtual Environment

Activating the Python Virtual Environment

Installing Django

Creating and Starting First Project In Django

For Creating Project Under New Folder of current folder Named django_project

For Creating Project Directly under Current Directory

Running Django Server on Local host

If any issues occurred check out this posts.

How to create and Activate the Virtual Environment for Python3 project.

Shrikant Dhayje ・ Jan 19 '22

Python venv or virtualenv won't activate on windows Powershell

Shrikant Dhayje ・ Jan 18 '22

Django Posts Announcement

Get List file all file names in a variable named `list_of_all_files` like given below

Create Virtual Environment normally with `venv` module

Installing `python-venv`

For Creating Project Under New Folder of current folder Named `django_project`

While ending the PHP File No Need to add last `?>` in some Situations