DEV Community: Imed Jaberi

Learn JSP in less than 5mins

Imed Jaberi — Sun, 28 Aug 2022 01:26:00 +0000

The Java ecosystem is evolved a lot over the last 20 years, and this is shown by it's constancy and popularity in the market. And when we talk about a robust community we can guarantee the diversity and richness of libraries/frameworks like Spring, Vert.x, Quarkus, ...etc.

Unfortunately, many JEE developers start using frameworks like Spring Boot without diving into details and concepts! Well, this works if you have a solid background in one of the other programing languages or if you are a fresh developer but with time you will feel importance of these things and how to make difference and be mandatory to grow more as a Java developer/engineer.

One of these notions is related to our article, it's "Servlet" which isn't easy to present in a few lines because we need to cover other APIs and concepts like "Applets" but we can say "Servlet is a Java class used to extend the capabilities of a server".

Sadly, I can't dive into these concepts this time but sure, I will do in the future.

What's JSP?

In the past, building JEE applications was based on Servlets which is painful because we don't separate between layers. This pain was resolved by the MVC (Model-View-Controller) pattern that pushes the JEE ecosystem to introduce JSP.

You can say:
{
"Model": "JDBC"
"View": "JSP"
"Controller": "Servlet"
}

JavaServer Pages (JSP) is a technology for building web pages that support dynamic content by helping to insert Java code into HTML pages.

You can think of it like a template engine!

JSP Manual

Expression

When you need to print dynamic content on your page from a variable or method value, you should use the expression tag;

<%= some java expression (variable/method) %>

Example:

<!-- jsp file -->
<h1>5 multiplied by 10 equals: <%= 5*10 %></h1>
<!-- generated html -->
<h1>5 multiplied by 10 equals: 50</h1>

Scriptlet

When you need to write java code inside jsp for some reasons, you can use the scriptlet tag;

<% some java code (1 to n lines) %>

Example:

<!-- jsp file -->
<%
int sum = 0;
for (int i = 0; i <= 5; i++) {
  // some logic
  sum += i;
}
out.println(String.format("<span> sum: %s </span>", sum));
%>
<!-- generated html -->
<span> sum: 15 </span>

"out" is one of the JSP implicit objects which gives the ability to print the value on the page.

Declaration

When you need to declare java variable and/or method inside jsp to re-use it later or any reason, you can use the declaration tag;

<%! java variable/method declaration %>

Example:

<!-- jsp file -->
<%!
String makeItLower (String str) {
  return str.toLowerCase();
} 
%>
Lower case "Hello World!": <%= makeItLower("Hello World!") %>
<!-- generated html -->
Lower case "Hello World!": hello world! %>

Best Practice

Declaring java code inside jsp file isn't a good idea because will ship a bad development experience. So, we can reduce the scriptlet and declaration tags usage by calling java class from jsp by;

<%@ page import="<package-name>.<class-name>" %>

Example:

// java file
package com.imedjaberi.jspartile;

public class Utils {
  public static String makeItLower (String str) {
    return str.toLowerCase();
  }
}

<!-- jsp file -->
<%@ page import="com.imedjaberi.jspartile.Utils" %>
<html>
  <body>
    Say: <%= Utils.makeItLower("Hello World!") %>
  </body>
</html>

This is not the only way to call java method inside jsp file, we can also use the inline way;
<html>
 <body>
   Say: <%= com.imedjaberi.jspartile.Utils.makeItLower("Hello World!") %>
 </body>
</html>

For import methods from different packages;

<%@ page import="com.imedjaberi.jspartile.*, java.utils.ArrayList" %>

Implicit Objects

As we mention from the beginning JSP is a server technology, so it's designed with few implicit objects to interact with server capabilities.

List of commonly used JSP objects:

Object	Type	Description
request	HttpServletRequest	Contains HTTP request headers and form data
response	HttpServletResponse	Provides HTTP support for sending response
out	JspWriter	JspWriter for including content in HTML page
session	HttpSession	Unique session for each user of the web application
application	ServletContext	Shared data for all users of the web application

Compose UI

When you're the project be bigger, this section will be your bible.
You can imagine that you have 10 pages and they all have the same header and footer blocks, you will find yourself re-creating the two blocks 10 times. You can do some math if you have more pages and/or more blocks.

As software engineers, we try as much as possible to follow engineering principles like DRY and from this perspective, we must split these blocks into separate files and use them as reusable blocks. This be possible through the include tag;

<jsp:include page="<file-namle>.<extension[html|jsp]>" />

Example:

<!-- header.html -->
<header>
  <h1>Welcome to header block!</h1>
</header>

<!-- footer.jsp -->
<footer>
  <h1>Welcome to footer block (Last updated: <%= new java.util.Date() %>)!</h1>
</footer>

<!-- index.jsp -->
<html>
  <body>
    <jsp:include page="header.html" />
    <main>
      Blah blah blah ... <br />
      Blah blah blah ... <br />
    </main>
    <jsp:include page="footer.jsp" />
  </body>
</html>

Forms

In this section, we'll cover a quick example of how to navigate between pages and access form data.

<!-- index.jsp -->
<form action="board.jsp">
  Full name: <input name="fullName" />
  Country: <select name="country">
      <option>Tunisia</option>
      <option>UK</option>
      <option>Spain</option>
      <option>Germany</option>
      <option>France</option>
  </select>
  Gender: <br />
  <input type="radio" name="gender" value="Male" /> Male
  <input type="radio" name="gender" value="Female" /> Female
  Favorite programing language: <br />
  <input type="radio" name="fPLang" value="JavaScript" /> JavaScript
  <input type="radio" name="fPLang" value="Java" /> Java
  <input type="radio" name="fPLang" value="Go" /> Go
  <input type="radio" name="fPLang" value="Elixir" /> Elixir
  <input type="radio" name="fPLang" value="Elm" /> Elm

 <button type="submit">Submit</button>
</form>

<!-- board.jsp -->
The developer is confirmed: <%= request.getParameter("fullName") %>
The developer country: <%= request.getParameter("country") %>
The developer gender: <%= request.getParameter("gender") %>
The developer favorite programing language: <br/>
<ul>
  <% 
    String[] langs = request.getParameterValues("fPLang");
    for (String lang: langs) {
      out.println("<li>" + lang + "</li>");
    }
  %>
</ul>

We have an alternative to <%=request.getParameter("fullName")%> is ${param.fullName}.

State Management

When we talk about the UI, we can't ignore talk about state management which is handled through session and cookies on jsp.

This isn't covered in the current article but in the near future, will do through an article that talks about building an app based on the MVC pattern with Servlet, JSP, and JDBC.

📚 Ressources:

Did I miss something? Let me know in the comment section and let’s work on that.

Thank you for reading. I hope this will help you on your

Connect your Java application with any SQL databases

Imed Jaberi — Sat, 21 May 2022 13:44:19 +0000

Java, one of the biggest and largest used languages in the industry. It would be better to get this language on your pack as a Software Engineer.

During my study of Java at the university since 2017, in more than one class, I have always noticed that 90% of my colleagues can't connect to the database, and all their projects were only dependent on the temporary interaction stored in memory.

So, today through this article I try to help them and all the community by providing a deep guide to explain each line you can write to connect your java application to SQL databases through JDBC.

JDBC 🤔 ?!

JDBC stands for Java Database Connectivity. JDBC is a Java API to connect and execute the query with any relational database through a JDBC driver. It is a part of JavaSE (Java Standard Edition).

Why Should We Use JDBC ?

Before JDBC, ODBC API was the database API to connect and execute the query with the database. But, ODBC API uses ODBC driver which is written in C language (i.e. platform dependent and unsecured). That is why Java has defined its own API (JDBC API) that uses JDBC drivers (written in Java language).

Connectivity 🪁 ?!

With this article, we use MySQL but almost steps are applied to all relational databases like PostgreSQL, SQLite, MariaDB, Oracle ...etc

First, let's setup our database by running this sql queries in your engine;

CREATE DATABASE myjavadb;
USE myjavadb;
CREATE TABLE user(
  id int(10),
  name varchar(40),
  age int(3)
);

Then, you can create a java project with your own IDE/editor and start adding the jdbc connector by following these 2 steps;

Install the Java connector (mysqlconnector.jar) here.
Load the mysqlconnector.jar connector file to your project by paste it in
JRE/lib/ext folder.

Now, we can start the connection behave by create 2 classes.

MySQLConnector to generate the database connection url based on the configuration.

public final class MySQLConnector {
  private final static String dbHost = "localhost";
  private final static String dbPort = "3306";
  private final static String dbName = "myjavadb";
  private final static String dbUsername = "root";
  private final static String dbPassword = "mypassword";

  public static String getConnectionURL() {
    return String.format(
      "jdbc:mysql//%s:%s/%s?user=%s&password=%s",
      dbHost,
      dbPort,
      dbName,
      dbUsername,
      dbPassword
    );
  }
}

DBContext to wrap all the logic behind the database.

import java.sql.*;

public class DBContext {
  private Connection connection;
  private Boolean connected;

  public DBContext() {
    this.connection = null;
    this.connected = false;
  }

  public Boolean connect() throws SQLException, ClassNotFoundException {
    // You can find the class name for any relational database with samll search on google.
    // PostgreSQL example: https://jdbc.postgresql.org/documentation/81/load.html
    Class.forName("mysql.jdbc.Driver");
    // We use DriverManager.getConnection() to connect.
    this.connection = DriverManager.getConnection(
      MySQLConnector.getConnectionURL()
    );
    this.connected = true;
    return this.connected;
  }

  public Boolean close() throws SQLException {
    // Close the opened connection.
    this.connection.close();
    if (this.connection.isClosed()) {
      this.connection = null;
      this.connected = false;
    }

    return !this.connected;
  }
}

Queries 🐱‍💻 ?!

Finally, we are on the sexiest part 🐱‍🏍! SQL databases give us the ability to fetch or mutate data based on the SQL CRUD operations through the Data manipulation language (DML).

📍 You can learn more on DML and SQL through this ressource.

If we need to make a query we need to create a statement and execute it but we have 2 type of statement in JDBC;

Statement: an interface provides methods to execute queries with the database.
PreparedStatement: an subinterface of Statement. It is used to execute parameterized query.

Summary:

If we want to pass params to the query and/or prevent the sql injection problems you should use PreparedStatement.

For our case, we will go with PreparedStatement;

public class DBContext {
  // ...
  private PreparedStatement preparedStatement;

  public DBContext() {
    // ...
    this.preparedStatement = null;
  }

  // ...

  public PreparedStatement preparedQuery(String sqlQuery) throws SQLException {
    // Not we can add our custom exception. Soon, I will write an article on it 😅!
    if (!this.connected)
      throw new SQLException();
    this.preparedStatement = this.connection.prepareStatement(sqlQuery);
    return this.preparedStatement;
  }

  // ...
}

Then we make a DBContext instance, and inject all needed params like this;

DBContext myDBContextInstance = new DBContext();
myDBContextInstance
  .preparedQuery("SELECT * FROM ?;")
  .setString(1, "users");

📍 You can check all params setter through the java offical web site.

At this stage, we prepared the SQL query but we don't interact with database yet!
To do that, we should execute it ... but we have 2 method to do that;

1.executeQuery: to execute fetching SQL queries (SELECT).

ResultSet result = myDBContextInstance
  .preparedQuery("SELECT * FROM ?;")
  .setString(1, "users")
  .executeQuery();

while(result.next())
  System.out.println(result.string('name'));

2.executeUpdate: to execute mutating SQL queries (INSERT, UPDATE, DELETE).

int result = myDBContextInstance
  .preparedQuery("DELETE * FROM ? WHERE id=?;")
  .setString(1, "users")
  .setString(2, "1")
  .executeUpdate();

System.out.println(result + " deleted!");

Note ⚠:
It would be better to improve the code by using patterns like the Singleton pattern to keep only one instance of the connection.

📚 Ressources to deep dive into JDBC:

Did I miss something? Let me know in the comment section and let’s work on that.

Thank you for reading. I hope this will help you on your journey! ❤️

How to install multiple versions of a npm package at the same time/project

Imed Jaberi — Sun, 25 Jul 2021 15:41:08 +0000

Have you encountered when you are working on a project and you want to upgrade a dependency but you can’t do because you will have to migrate a lot of code or you should test your project with multi-versions of some module(s)?

Personally, I make and maintain a lot of Koa modules. Sometimes, I need to make the modules work with all versions of Koa so this is a real example how i do to solve this problem.

I found a solution by use a custom alias when installing a package with npm or yarn.

Alias allows you to install multiple versions of a same package in the same project.

You can use the alias by following this command:

with npm

npm i <your-alias>@npm:<package-name>

with yarn

yarn add <your-alias>@npm:<package-name>

When you want to install a specific version of the package append the command with @<package-version>.

Read the npm documentation here and/or yarn here to find more about alias.

For example, we want to use Koa with release 1.x.x and the latest one 2.x.x.

with npm

npm i koa-v1@npm:koa@1
npm i koa@npm:koa

with yarn

yarn add koa-v1@npm:koa@1
yarn add koa@npm:koa

Now, when you import the Koa module using koa-v1, it means that you are using koa@1.x.x. Otherwise, when importing with koa, it means that you are using the latest version of koa@ 2.x.x.

Did I miss something? Let me know in the comment section and let’s work on that.

Thank you for reading. I hope this will help you on your journey! ❤️

Fix React Native start error: Invalid regular expression 🐛

Imed Jaberi — Fri, 16 Apr 2021 15:55:35 +0000

Typically, you meet this problem when you use React Native with a version lower than 0.60.0.

Why 🤔 !

It's caused by the opposition between the regexp used in the metro configuration and the parser of Node.js versions which won't tolerate it anymore.

Solution 🚀

To solve this problem you have 2 alternatives; the 1st solution is to downgrade the Node.js version (v12.10.0 is the latest version that works) which will apply the correct way to deal with parsing error (not recommended because the security vulnerability).

The 2nd solution is by override the regexp used by metro-config (recommended);

1- We have to move to the project folder.
2- Open ./node_modules/metro-config/src/defaults/blacklist.js
3- Replace the following;

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/,
];

With

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/,
];

Note ⚠️: Each time you run npm/yarn install you will have to change it again because the problem is back again and again ...

Therefore, I came with two solutions that aim to save time in going to the file and changing it every time.

Solution 1:

Create a script to automate the task and run it every time after installation.

1- Install replace-in-file module:

# npm
npm i replace-in-file
# yarn
yarn add replace-in-file

2- Create a file at the same level as node_modules folder name it fix-metro-config.js (you can use any name you want).

3- Copy this script inside the fix-metro-config.js file:

// load the module.
const replaceInFile = require('replace-in-file')
// path for metro config file.
const METRO_CONFIG_PATH =
  "./node_modules/metro-config/src/defaults/blacklist.js"
// options for editing the file.
const options = [
  { from: "modules[/", to: "modules[\\/" },
  { from: "react[/", to: "react[\\/" },
  { from: "dist[/", to: "dist[\\/" }
]

try {
  // looping on each option
  options.forEach((option, index) => {
    // append the files key for each option.
    const [{ hasChanged }] = replaceInFile.sync({
      ...option,
      files: METRO_CONFIG_PATH
    })
    // logger.
    console.log(
      `The iteration number ${index + 1} handled with status ${hasChanged}`
    )
  })
} catch (error) {
  // logger.
  console.error("Error occurred:", error)
}

4- Go to package.json then add this line:

{
  ... // other keys.
  "scripts": {
    ... // other keys.
    "postinstall": "node fix-metro-config.js", // add this line.
    ... // other keys.
  }
  ... // other keys.
}

Solution 2:

Use patch-package to handle it automatically after installing your node modules and fix the metro-config for the first time.

1- Generate a permanent patch file:

npx patch-package metro-config

2- Go to package.json then add this line:

{
  ... // other keys.
  "scripts": {
    ... // other keys.
    "postinstall": "npx patch-package", // add this line.
    ... // other keys.
  }
  ... // other keys.
}

I'd love to hear about other solutions ? ✨
Feel free to share it with us 👋

Serve Static File with Koa✨

Imed Jaberi — Fri, 19 Jun 2020 23:19:45 +0000

Koa.js is a very minimal and high perf. Node.js framework. For that, it will be one of the best solution for serve static files.

Let's Start 🐣

After initializing a new project by generate new package.json file and creating an index.js file, we need to add koa and koa-static:

# npm .. 
npm i koa koa-static
# yarn ..
yarn add koa koa-static

Now, we are ready to setup the Koa.js application (instance), then add koa-static as middleware:

// Modules
const Koa = require('koa');
const path = require('path');
const serve = require('koa-static');

// Expected here; serve static files from public dir
const staticDirPath = path.join(__dirname, 'public');

// Init Koa.js server
const server = new Koa();

// Mount the middleware
server.use(serve(staticDirPath));

// Run Koa.js server
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => console.log(`Server Listening on PORT ${PORT} 🚀 ..`));

⚠️ I know that it's not the only way, but it's the fastest.

Example 👾

Let's say the folder we expected to use contains these files;

├── public/
|   ├── test.html
|   ├── test.md
|   └── test.png
|   └── test.txt
|   └── ...

So, you can use the following entrypoint to access these static files;

Thank you for reading ❤️. I hope, I didn't waste your time 😇.

Koa BodyParser with Firebase Cloud Functions ✔️

Imed Jaberi — Tue, 16 Jun 2020 02:08:58 +0000

Many Koa.js users encounter some problems with Firebase Functions during parse bodies using koa-bodyparser.

So, I'd like to share how to solve this problem and help who haven't come across this yet 🧙🏻‍♂️❤️.

Before starting there are some terms that should be clarified for newcomers.

Koa.js is a very minimal and elegant Node.js web framework developed by the team behind Express.js.
Firebase Functions is a serverless framework that lets you automatically run backend code in response to events triggered by Firebase features and HTTPS requests.
koa-bodyparser A body parser for Koa, based on co-body. support json, form and text type body.

Note: The current version of koa-bodyparser is 4.3.0

You should know that Firebase actually parses the body. (see more here 👀)
Therefore the module getting confused deals with ctx.request.body and ctx.req.body and an error appears here.

The quick solution is to use `ctx.req.body` because it's already parsed. 😅

Also, you can create a small middleware function to support already parsed bodies. (ref to this code 📌)

// Import koa-bodyparser module
const bodyParser = require('koa-bodyparser');

// Middleware for Koa@2.x.x
function hybridBodyParser (opts) {
  const bp = bodyParser(opts);
  return async function (ctx, next) {
    ctx.request.body = ctx.request.body || ctx.req.body;
    return bp(ctx, next);
  }
}

// Usage 
app.use(hybridBodyParser());

I'd love to hear about other solutions ? ✨
Feel free to share it with us 👋

Serve Static File with GraphQL Yoga 🧘

Imed Jaberi — Wed, 13 May 2020 18:29:00 +0000

I love the Prisma GraphQL Yoga ❤️ because it's from the future, and all the features you might see today from the Apollo Server are inspired by it. ( for more about yoga and apollo 👀)

So, I'd like to share how to solve a problem that encountered me when I tried to serve static files under graphql-yoga.

Before starting there are some terms that should be clarified for newcomers.

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
GraphQL Yoga made by Prisma team, is fully-featured GraphQL Server with focus on easy setup, performance & great developer experience. It provides an abstraction on top of Apollo’s (apollo-server-express@1.x.x and other graphql tools).

Through GraphQL Yoga you have access to Express by server.express but you haven't access ❌ to the static method ~~server.express.static()~~.
Therefore, most developers have tended to adding Express as a dependency then use it like this.

// yarn add express or npm i express

// import express form 'express';
const express = require('express');

// server here is a GraphQL Yoga server
server.express.use('/uploads', express.static('uploadsDir')); // ✔️

Personally, I think this method is somewhat confused. Why do I add Express as a dependency ? And I can solve this problem without that in few linges.

server.express.get('/uploads/*', (req, res, next) => {
  // here you can use your way to get the path dir ..  
  const pathDir = path.join(__dirname, `../uploads`);

  res.sendFile(pathDir);
}); // ✔️🚀

If you want to turn a blind eye on the entrypoint, you can use '*' and add a small logic.

server.express.get('*', (req, res, next) => {
  // small logic .. 
  const routes = [
    '/graphql',
    '/subscriptions',
    '/playground'
  ];

  if(routes.includes(req.url)) {
    return next();
  }

  // here you can use your way to get the path dir ..  
  const pathDir = path.join(__dirname, `../uploads`);

  res.sendFile(pathDir);
});

DEV Community: Imed Jaberi

Learn JSP in less than 5mins

What's JSP?

JSP Manual

Expression

Scriptlet

Declaration

Best Practice

Implicit Objects

Compose UI

Forms

State Management

📚 Ressources:

Did I miss something? Let me know in the comment section and let’s work on that.

Thank you for reading. I hope this will help you on your

Connect your Java application with any SQL databases

JDBC 🤔 ?!

Connectivity 🪁 ?!

Queries 🐱‍💻 ?!

📚 Ressources to deep dive into JDBC:

Did I miss something? Let me know in the comment section and let’s work on that.

Thank you for reading. I hope this will help you on your journey! ❤️

How to install multiple versions of a npm package at the same time/project

I found a solution by use a custom alias when installing a package with npm or yarn.

Did I miss something? Let me know in the comment section and let’s work on that.

Thank you for reading. I hope this will help you on your journey! ❤️

Fix React Native start error: Invalid regular expression 🐛

Why 🤔 !

Solution 🚀

I'd love to hear about other solutions ? ✨ Feel free to share it with us 👋

Serve Static File with Koa✨

Let's Start 🐣

Example 👾

Thank you for reading ❤️. I hope, I didn't waste your time 😇.

Koa BodyParser with Firebase Cloud Functions ✔️

So, I'd like to share how to solve this problem and help who haven't come across this yet 🧙🏻‍♂️❤️.

The quick solution is to use ctx.req.body because it's already parsed. 😅

I'd love to hear about other solutions ? ✨ Feel free to share it with us 👋

Serve Static File with GraphQL Yoga 🧘

I'd love to hear about other solutions ? ✨
Feel free to share it with us 👋

The quick solution is to use `ctx.req.body` because it's already parsed. 😅

I'd love to hear about other solutions ? ✨
Feel free to share it with us 👋