Create TeamAdd Your APIDocs
Log In
Sign Up

Startup Ideas

FREEMIUM
By onlinestorekit | Updated 2 months ago | Business
Popularity

0.2 / 10

Latency

361ms

Service Level

0%

Health Check

N/A

Back to All Tutorials (1)

How to Display Startup Ideas Using PHP and Bootstrap 5

Displaying a collection of stratup ideas on your website is really easy with the Startup Ideas API. With thousands of unique and innovative startup ideas, our API is the ultimate resource for anyone looking to inspire and motivate their audience.

In this guide, we’ll show you how to use PHP and Bootstrap 5 to display a collection of startup ideas using Startup Ideas API. Whether you’re building a blog, a startup directory, or just looking for a way to engage your audience with fresh and exciting content, this guide will give you all the tools you need to get started. So let’s dive in and explore the world of entrepreneurship together!

Display Startup Ideas Using PHP and Bootstrap 5

In this article section, we’ll show you how to use PHP and Bootstrap 5 to display a collection of startup ideas that will leave your audience feeling inspired and ready to take on the world. With our step-by-step guide, you’ll be able to seamlessly integrate our API into your website or application, and start sharing the excitement of entrepreneurship with the world.

So let’s get started and create something amazing!

1. Create an index.php file

First, create an index.php file on your server or localhost. Open the file using your preferred text editor.

2. Include Bootstrap 5’s CSS and JS

Create a basic HTML template and include Bootstrap’s CSS and JS. For this tutorial, we use the following HTML template:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Startup Ideas Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<!--Main layout-->
<main style="margin-top: 18px">
<div class="container">
<!-- Section: Main chart -->
<section class="mb-4">
<h1 class="display-5 text-center fw-bold pt-5 mx-auto">Startup Demo</h1>
<p>Example Content</p>
</section>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>

You can style it later.

3. Add the required PHP code

Subscribe to Startup Ideas API and get the required PHP code on the right side. You can adjust the endpoint and the additional parameters as per your needs. In this tutorial, we use the following PHP cURL code:

<?php

$curl = curl_init();

curl_setopt_array($curl, [
	CURLOPT_URL => "https://startup-ideas.p.rapidapi.com/ideas/young_startup_ideas",
	CURLOPT_RETURNTRANSFER => true,
	CURLOPT_FOLLOWLOCATION => true,
	CURLOPT_ENCODING => "",
	CURLOPT_MAXREDIRS => 10,
	CURLOPT_TIMEOUT => 30,
	CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
	CURLOPT_CUSTOMREQUEST => "GET",
	CURLOPT_HTTPHEADER => [
		"X-RapidAPI-Host: startup-ideas.p.rapidapi.com",
		"X-RapidAPI-Key: {{YOUR API KEY}}"
	],
]);

$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
$data = json_decode($response, true);
?>

Add the above code on top of the previous HTML code inside the index.php file. So we will have the following code:

<?php

$curl = curl_init();

curl_setopt_array($curl, [
	CURLOPT_URL => "https://startup-ideas.p.rapidapi.com/ideas/young_startup_ideas",
	CURLOPT_RETURNTRANSFER => true,
	CURLOPT_FOLLOWLOCATION => true,
	CURLOPT_ENCODING => "",
	CURLOPT_MAXREDIRS => 10,
	CURLOPT_TIMEOUT => 30,
	CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
	CURLOPT_CUSTOMREQUEST => "GET",
	CURLOPT_HTTPHEADER => [
		"X-RapidAPI-Host: startup-ideas.p.rapidapi.com",
		"X-RapidAPI-Key: {{YOUR API KEY}}"
	],
]);

$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
$data = json_decode($response, true);
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Startup Ideas Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<!--Main layout-->
<main style="margin-top: 18px">
<div class="container">
<!-- Section: Main chart -->
<section class="mb-4">
<h1 class="display-5 text-center fw-bold pt-5 mx-auto">Startup Demo</h1>
<p>Example Content</p>
</section>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>

4. Adjust the PHP code

Now, we just need to adjust the PHP code by parsing the response and create some new variables to use each fetched data into some HTML parts.
First, after defining variable $data = json_decode($response, true);, we need to parse the data inside the Array, e.g.:

$title = $data['category'];
$total = $data['total_ideas'];
$ideas = $data['ideas'];

We get the $ideas variable and let’s loop each data:

foreach ($ideas as $idea) {
    $id = $idea['id'];
    $list = $idea['idea'];
}

We can then use the data individually and put them into Bootstrap 5’s card layout, like this:

$data = json_decode($response, true);

$title = $data['category'];
$total = $data['total_ideas'];
$ideas = $data['ideas'];
$output = '<div class="container text-center">';
$output .= '<div class="row py-5 mx-auto">';
foreach ($ideas as $idea) {
    $id = $idea['id'];
    $list = $idea['idea'];
    $number = '#' . $id;
    $output .= '<div class="col-3 gy-2">
    <div class="card">
    <div class="card-body">
      <h5 class="card-title">'.$number.'</h5>
      <p class="card-text">'.$list.'</p>
    </div>
  </div>
  </div>';
}
$output .= '</div>';
$output .= '</div>';

So, we will have the final PHP code for this example:

<?php
$curl = curl_init();
curl_setopt_array($curl, [
	CURLOPT_URL => "https://startup-ideas.p.rapidapi.com/ideas/young_startup_ideas",
	CURLOPT_RETURNTRANSFER => true,
	CURLOPT_FOLLOWLOCATION => true,
	CURLOPT_ENCODING => "",
	CURLOPT_MAXREDIRS => 10,
	CURLOPT_TIMEOUT => 30,
	CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
	CURLOPT_CUSTOMREQUEST => "GET",
	CURLOPT_HTTPHEADER => [
		"X-RapidAPI-Host: startup-ideas.p.rapidapi.com",
		"X-RapidAPI-Key: {{YOUR API KEY}}"
	],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
$data = json_decode($response, true);

$title = $data['category'];
$total = $data['total_ideas'];
$ideas = $data['ideas'];
$output = '<div class="container text-center">';
$output .= '<div class="row py-5 mx-auto">';
foreach ($ideas as $idea) {
    $id = $idea['id'];
    $list = $idea['idea'];
    $number = '#' . $id;
    $output .= '<div class="col-3 gy-2">
    <div class="card">
    <div class="card-body">
      <h5 class="card-title">'.$number.'</h5>
      <p class="card-text">'.$list.'</p>
    </div>
  </div>
  </div>';
}
$output .= '</div>';
$output .= '</div>';
?>

5. FInalize the looks and feel

Based on the previous PHP code as we have already defined the $title and $total variables and by combining them, we can create a title for the page with this format: {total number of the startup ideas} + {startup category name}. As the output, we will have: “75 Young Startup Ideas”.

Now let’s print the PHP variables into the HTML layout, like this:

<?php
$curl = curl_init();
curl_setopt_array($curl, [
	CURLOPT_URL => "https://startup-ideas.p.rapidapi.com/ideas/young_startup_ideas",
	CURLOPT_RETURNTRANSFER => true,
	CURLOPT_FOLLOWLOCATION => true,
	CURLOPT_ENCODING => "",
	CURLOPT_MAXREDIRS => 10,
	CURLOPT_TIMEOUT => 30,
	CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
	CURLOPT_CUSTOMREQUEST => "GET",
	CURLOPT_HTTPHEADER => [
		"X-RapidAPI-Host: startup-ideas.p.rapidapi.com",
		"X-RapidAPI-Key: {{YOUR API KEY}}"
	],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
$data = json_decode($response, true);

$title = $data['category'];
$total = $data['total_ideas'];
$ideas = $data['ideas'];
$output = '<div class="container text-center">';
$output .= '<div class="row py-5 mx-auto">';
foreach ($ideas as $idea) {
    $id = $idea['id'];
    $list = $idea['idea'];
    $number = '#' . $id;
    $output .= '<div class="col-3 gy-2">
    <div class="card">
    <div class="card-body">
      <h5 class="card-title">'.$number.'</h5>
      <p class="card-text">'.$list.'</p>
    </div>
  </div>
  </div>';
}
$output .= '</div>';
$output .= '</div>';
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Startup Ideas Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<!--Main layout-->
<main style="margin-top: 18px">
<div class="container">
<!-- Section: Main chart -->
<section class="mb-4">
<h1 class="display-5 text-center fw-bold pt-5 mx-auto"><?php echo $total . ' ' . $title; ?></h1>
<?php print_r($output); ?>
</section>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>

Now, your webpage will look like this:

Really easy, right?

Subscribe to Startup Ideas API now and explore or showcase the top startup ideas to your audience!