Skip to content
Home » Create an Image Gallery – Problem 03

Create an Image Gallery – Problem 03

Create an image gallery making use of expressjs and ejs templates. This problem will help you to understand and setup expressjs and using it together with ejs templating to create an image gallery.

ExpressJS

Express.js, commonly known as Express, is a popular and lightweight web application framework for Node.js. It provides a wide range of features and functionality for building web applications and APIs, and is known for its flexibility, simplicity, and scalability.

Express provides a minimalistic and unopinionated approach to building web applications, which allows developers to create applications in their own preferred style and architecture. It provides a wide range of middleware, which can be used to handle common tasks such as logging, authentication, and error handling, as well as to extend and customize the behavior of the framework.

Express also provides a robust routing system, which allows developers to easily define and handle routes for incoming HTTP requests, and supports a wide range of HTTP methods such as GET, POST, PUT, DELETE, and more. It also provides support for templating engines, allowing developers to easily generate dynamic HTML pages and other content.

One of the key benefits of Express is its scalability. It is designed to handle high levels of traffic and concurrent requests, and can be easily extended and customized to meet the specific needs of a web application. It also integrates well with other Node.js modules and frameworks, allowing developers to take advantage of a wide range of third-party libraries and tools.

Express is open source and free to use, and is actively maintained by a community of developers. It has become one of the most popular Node.js web frameworks, and is used by many organizations to build high-performance and scalable web applications and APIs.

EJS Tempalting

EJS, which stands for Embedded JavaScript, is a simple and powerful templating language that allows developers to generate HTML markup with plain JavaScript. It can be used with Node.js, as well as in web browsers, and provides a range of features for creating dynamic and reusable templates.

With EJS, developers can create templates that contain placeholders for dynamic content, which can be replaced with actual content at runtime. This makes it easy to generate HTML pages with dynamic data such as user names, product listings, or other types of content that change frequently.

EJS supports a wide range of features, including conditional statements, loops, variables, and partial templates, which can be used to create complex and reusable templates with minimal effort. It also provides support for custom tags and filters, allowing developers to extend and customize the behavior of the templating engine.

One of the key benefits of EJS is its simplicity and ease of use. It uses standard JavaScript syntax, which makes it easy for developers to get started and write templates using familiar programming constructs. It also integrates well with other Node.js modules and frameworks, such as Express, making it a popular choice for building web applications and APIs.

EJS is open source and free to use, and is actively maintained by a community of developers. It has become a popular choice for building dynamic and reusable templates for web applications and other types of projects.

Excercise

  • Setup Express Project, with ejs as template
  • Make the application run on a port number > 50000
  • Add a route to serve the index.ejs file
  • Create an Array of images (making use of https://loremflickr.com/ ) by randomly picking width and height from these values [200,250,300,350,400]
  • The array will have objects with structure [{url:”,width:250′,height:200,position:idx}]
  • Send the Array from express to ejs for rendering
  • Render the images making use of EJS
  • Implement Pagination with a url pattern /gallery/[page]