Improvement(408420): Revamp PHP sample with embedConfig file

README.md

@@ -15,29 +15,38 @@ The samples require the following requirements to run.
 
 * [PHP installer](https://windows.php.net/download/)
 * [Visual Studio Code](https://code.visualstudio.com/download)
-* In Visual studio code download the extensions, PHP intelephense and PHP Server.
+> **NOTE:** In Visual studio code download the extensions, PHP intelephense and PHP Server.
 
-## Using the PHP sample
+## Configuration
 
-* Open the PHP sample's file `index.php` in Visual studio code or any IDE which supports PHP.
+* Please ensure you have enabled embed authentication on the `embed settings` page. If it is not currently enabled, please refer to the following image or detailed [instructions](https://help.boldbi.com/site-administration/embed-settings/#get-embed-secret-code) to enable it.
 
-* Please change the following properties in the `index.php` file as per your Bold BI Server.
+    ![Embed Settings](https://github.com/boldbi/aspnet-core-sample/assets/91586758/b3a81978-9eb4-42b2-92bb-d1e2735ab007)
 
-| **Parameter**         | **Description**                                                                                                                                                             |
-|-----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| **serverUrl**         | Dashboard Server BI URL. For Enterprise Edition it should be like - `http://localhost:5000/bi/site/site1` and for Cloud it should be like - `http://dashboard.syncfusion.com/bi`. |
-| **dashboardId**       | Dashboard Id of the dashboard you want to embed here.                                                                                                                        |
-| **authorizeServerUrl**| URL pointing to AuthorizeServer API. We have a running PHP sample on port 8080. Ex: `http://localhost:8080/rest/authorizeserver.php`.                                         |
+* To download the `embedConfig.json` file, please follow this [link](https://help.boldbi.com/site-administration/embed-settings/#get-embed-configuration-file) for reference. Additionally, you can refer to the following image for visual guidance.
 
-* Open the `authorizeserver.php` file and provide the value for below described properties as per your Bold BI server.
+    ![Embed Settings Download](https://github.com/boldbi/aspnet-core-sample/assets/91586758/d27d4cfc-6a3e-4c34-975e-f5f22dea6172)
 
-| **Parameter** | **Description** |
-|---------------|-----------------|
-| **secretCode** | Get your EmbedSecret key from the Embed tab by enabling the `Enable embed authentication` on the [Administration page](https://help.boldbi.com/embedded-bi/site-administration/embed-settings/?utm_source=github&utm_medium=backlinks). |
-| **userEmail**  | UserEmail of the Admin in your Bold BI, which would be used to get the dashboard list. |
+    ![EmbedConfig Properties](https://github.com/boldbi/aspnet-core-sample/assets/91586758/d6ce925a-0d4c-45d2-817e-24d6d59e0d63)
 
-* Now run the PHP sample to render the particular dashboard.
+* Copy the downloaded `embedConfig.json` file and paste it into the designated [location](https://github.com/boldbi/php-sample/tree/master/rest) within the application. Please ensure you have placed it in the application, as shown in the following image.
 
+    ![php-embedconfig](https://github.com/user-attachments/assets/cea9eff5-66d9-438b-8c17-45b2bf706229)
+
+## Run a PHP Sample
+
+ * Open the PHP sample in visual studio code or any respective IDE.
+
+ * Ensure whether embedConfig file is located in following location, `rest/embedConfig.json` and run the PHP application using the respective IDE or using visual studio code.
+
+ * Right-click the `index.php` file and select `PHP Server: Serve project`.
+
+   ![image](https://github.com/user-attachments/assets/8dc49ff7-9d07-4f23-a66f-3d8e0ade03f2)
+
+ * After that application has started, it will display a URL in the command line interface, typically something like (e.g., http://localhost:3000/). Copy this URL and paste it into your default web browser.
+
+   ![image](https://github.com/user-attachments/assets/81230102-1fdd-414a-b6e2-d1e5f519b1f1)
+
 Please refer to the [help documentation](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/php-with-javascript/#how-to-run-the-sample?utm_source=github&utm_medium=backlinks) to know how to run the sample.
 
 ## Online Demos

index.php

@@ -1,33 +1,51 @@
-
 <?php
-// ServerURL, DashboardPath and AuthorizeSeverURL to embed widget 
-$serverUrl = "http://localhost:53623/bi/site/site1";
-$dashboardId ="42d69d1a-dcd8-41b0-93a4-d4cdd2c53241";
-$authorizeServerUrl = "http://localhost:3000/rest/authorizeserver.php";
+$apiHost = "http://localhost:3000";
+$authorizeServerUrl = $apiHost . "/rest/authorizeserver.php";
+$getDataUrl = $apiHost . "/rest/getData.php";
 ?>
 
 <html>
+
 <head>
-<script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/latest/boldbi-embed.js"></script>
+    <script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/latest/boldbi-embed.js"></script>
 </head>
-<body onload="embedSample();">
-<div id="dashboard"></div>
+
+<body onload="Init();">
+    <div id="dashboard"></div>
     <script>
-        function embedSample() {
-            var dashboardemb = BoldBI.create({
-                serverUrl: '<?php echo $serverUrl;?>',
-                dashboardId: '<?php echo $dashboardId;?>',
-                embedContainerId: "dashboard",// This should be the container id where you want to embed the dashboard
-                embedType: BoldBI.EmbedType.Component,
-                environment: BoldBI.Environment.Enterprise,
-                height: "700px",
-                width: "1500px",
+        async function Init() {
+            try {
+                // Fetch data from the PHP backend
+                const response = await fetch('<?php echo $getDataUrl;?>');
+                // Check if the response is okay
+                if (!response.ok) {
+                    throw new Error("Network response was not ok");
+                }
+
+                // Parse the JSON data
+                const data = await response.json();
+                // Call the function to render the dashboard with the fetched data
+                renderDashboard(data);
+            } catch (error) {
+                console.error("Error fetching the embed configuration:", error);
+            }
+        }
+
+        function renderDashboard(data) {
+            this.dashboard = BoldBI.create({
+                serverUrl: data.ServerUrl + "/" + data.SiteIdentifier,
+                dashboardId: data.DashboardId,
+                embedContainerId: "dashboard",
+                width: "100%",
+                height: window.innerHeight + 'px',
                 authorizationServer: {
                     url: '<?php echo $authorizeServerUrl;?>'
                 }
             });
-            dashboardemb.loadDashboard();
+
+            this.dashboard.loadDashboard();
         }
     </script>
 </body>
+
 </html>

rest/authorizeserver.php

@@ -1,9 +1,19 @@
 <?php
-//// Embed Properties ////
-$secretCode = "Enter your embed secret"; // Use your SecretCode here 
-$userEmail = "demo@gmail.com"; // Email address of the user
+$jsonData = file_get_contents('embedConfig.json');
+
+if ($jsonData === false) {
+    echo 'Error: embedConfig.json file not found.';
+    exit(1); // Exit the program with a non-zero exit code to indicate an error
+}
+
+$appConfig = json_decode($jsonData, true);
+
+$secretCode = $appConfig['EmbedSecret'];
+$userEmail = $appConfig['UserEmail'];
+
 $serverTimeStamp=time();
 $data = json_decode(file_get_contents('php://input'), true);
+
 if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
   header('Access-Control-Allow-Origin: *');
   header('Access-Control-Allow-Methods: POST, GET, DELETE, PUT, PATCH, OPTIONS');
@@ -16,14 +26,15 @@
 
 header('Access-Control-Allow-Origin: *');
 header('Content-Type: application/json');
+
 // Getting embedQuerString and dashboardServerApiUrl from BoldBI wrapper 
 if ($data != null && $data["embedQuerString"] !="" && $data["dashboardServerApiUrl"]!="") {
   $embedQuerString = $data["embedQuerString"];
   $dashboardServerApiUrl= $data["dashboardServerApiUrl"];
   $dashdetails = GetEmbedDetails($embedQuerString, $dashboardServerApiUrl);
   header('Content-type: application/json');
   echo json_encode($dashdetails);
- }
+}
 
 // This function used to get dashboard details from Bold BI Server 
 function GetEmbedDetails($embedQuerString, $dashboardServerApiUrl){
@@ -33,6 +44,7 @@ function GetEmbedDetails($embedQuerString, $dashboardServerApiUrl){
   $embedQuerString = $embedQuerString . "&embed_server_timestamp=" . $serverTimeStamp;
   $embedSignature = "&embed_signature=" . getSignatureUrl($embedQuerString);
   $embedDetailsUrl = "/embed/authorize?" . $embedQuerString . $embedSignature;
+
   $curl = curl_init();
   curl_setopt_array($curl, array(
     CURLOPT_URL => $dashboardServerApiUrl . $embedDetailsUrl,
@@ -50,11 +62,10 @@ function GetEmbedDetails($embedQuerString, $dashboardServerApiUrl){
   $response = curl_exec($curl);
   $err = curl_error($curl);
   curl_close($curl);
-
   return $response;
 }
 
-//// Prepare embed_Signature by encrypting with secretCode ////
+// Prepare embed_Signature by encrypting with secretCode
 function getSignatureUrl($embedQuerString) {
   global $secretCode; 
   $keyBytes = mb_convert_encoding($secretCode, 'UTF-8');

rest/getData.php

@@ -0,0 +1,38 @@
+<?php
+header("Access-Control-Allow-Origin: *");
+header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
+header("Access-Control-Allow-Headers: Content-Type, Authorization");
+
+// Rest of your PHP script
+header("Content-Type: application/json");
+
+// Read the JSON file
+$data = file_get_contents('embedConfig.json');
+
+if ($data === false) {
+    http_response_code(500); // Internal Server Error
+    echo "embedConfig.json file not found!";
+    exit();
+}
+
+// Parse the JSON data
+$dataArray = json_decode($data, true);
+
+if (json_last_error() !== JSON_ERROR_NONE) {
+    http_response_code(500); // Internal Server Error
+    echo json_encode(array("error" => "Could not parse the JSON data."));
+    exit();
+}
+
+// Extract specific values
+$clientEmbedConfigData = array(
+    "DashboardId" => $dataArray["DashboardId"],
+    "ServerUrl" => $dataArray["ServerUrl"],
+    "SiteIdentifier" => $dataArray["SiteIdentifier"],
+    "EmbedType" => $dataArray["EmbedType"],
+    "Environment" => $dataArray["Environment"],
+);
+
+// Return the specific values of parsed data as JSON response
+echo json_encode($clientEmbedConfigData, JSON_PRETTY_PRINT);
+?>